Accordion

// owner: Sona
"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const faqItems = [
  {
    id: "item-1",
    question: "What is AICU?",
    answer:
      "A collaborative UI system that ships with accessible primitives, sensible defaults, and opinionated styling.",
  },
  {
    id: "item-2",
    question: "Can I customize the components?",
    answer:
      "Yes. Use Tailwind utility classes or override props to make each component your own.",
  },
  {
    id: "item-3",
    question: "Do the accordions support multiple items?",
    answer:
      "Switch the type to 'multiple' to keep several sections open at the same time.",
  },
];

export default function AccordionExample() {
  return (
    <Accordion type="single" collapsible className="w-full max-w-2xl">
      {faqItems.map((item) => (
        <AccordionItem key={item.id} value={item.id}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}