Accordion List

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export type AccordionListItem = {
  id: string
  title: string
  content: string
  disabled?: boolean
}

type AccordionListProps =
  | {
      items: AccordionListItem[]
      type?: "single"
      defaultValue?: string
      collapsible?: boolean
    }
  | {
      items: AccordionListItem[]
      type: "multiple"
      defaultValue?: string[]
      collapsible?: never
    }

export function AccordionList(props: AccordionListProps) {
  const { items } = props

  const content = items.map((item) => (
    <AccordionItem key={item.id} value={item.id} disabled={item.disabled}>
      <AccordionTrigger className="text-left text-sm">
        {item.title}
      </AccordionTrigger>
      <AccordionContent className="text-sm text-muted-foreground">
        {item.content}
      </AccordionContent>
    </AccordionItem>
  ))

  if (props.type === "multiple") {
    return (
      <Accordion
        type="multiple"
        defaultValue={props.defaultValue}
        className="w-full rounded-md border px-4"
      >
        {content}
      </Accordion>
    )
  }

  return (
    <Accordion
      type="single"
      collapsible={props.collapsible ?? true}
      defaultValue={props.defaultValue}
      className="w-full rounded-md border px-4"
    >
      {content}
    </Accordion>
  )
}

const cardItems = [
  {
    id: "plans",
    title: "What subscription plans do you offer?",
    content:
      "We offer three subscription tiers: Starter, Professional, and Enterprise. Each plan includes increasing storage limits, API access, priority support, and team collaboration features.",
  },
  {
    id: "billing",
    title: "How does billing work?",
    content:
      "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers.",
  },
  {
    id: "cancel",
    title: "How do I cancel my subscription?",
    content:
      "You can cancel anytime from account settings. Your access continues until the end of your current billing period.",
  },
]

export function AccordionCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Subscription & Billing</CardTitle>
        <CardDescription>
          Common questions about your account, plans, payments, and
          cancellations.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible defaultValue="plans">
          {cardItems.map((item) => (
            <AccordionItem key={item.id} value={item.id}>
              <AccordionTrigger>{item.title}</AccordionTrigger>
              <AccordionContent>{item.content}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </CardContent>
    </Card>
  )
}