Accordion

export default function AccordionHero() {
  return (
    <Accordion defaultValue={['item-1']} className="w-full max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Ora UI?</AccordionTrigger>
        <AccordionContent>
          Ora UI is a collection of styled, accessible components built on Base UI primitives.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. Every component is built on Base UI, which follows WAI-ARIA authoring practices.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can I use it in my project?</AccordionTrigger>
        <AccordionContent>
          Absolutely. Copy the source into your project or install via the CLI.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

export default function AccordionDefault() {
  return (
    <Accordion className="w-full max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Getting started</AccordionTrigger>
        <AccordionContent>
          Install the component using the CLI or copy the source into your project.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Customisation</AccordionTrigger>
        <AccordionContent>
          Override styles with className or extend the component with your own variants.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Accessibility</AccordionTrigger>
        <AccordionContent>
          Full keyboard navigation and screen reader support out of the box.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

export default function AccordionMultiple() {
  return (
    <Accordion multiple defaultValue={['item-1', 'item-2']} className="w-full max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Design tokens</AccordionTrigger>
        <AccordionContent>
          Colour, spacing, and typography tokens are defined in the Tailwind config.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Component variants</AccordionTrigger>
        <AccordionContent>
          Use className to apply variant styles, or compose with CVA for named variants.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Dark mode</AccordionTrigger>
        <AccordionContent>
          All semantic tokens automatically adapt when the dark-mode class is applied.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}