Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@otfdashkit/ui'

const FAQ_ITEMS = [
  {
    q: 'Is OTF free to use?',
    a: 'Yes. The SDK and core components ship under MIT. Paid tiers add Pro components and starter kits with full source.',
  },
  {
    q: 'Does it work with Next.js, Vite, and Remix?',
    a: 'All three. Components are framework-agnostic React. Tailwind handles styling, so any host that supports Tailwind v4 works.',
  },
  {
    q: 'How is theming handled?',
    a: 'Every component reads from the same CSS-variable token set. Drop in a theme file (e.g. @otfdashkit/ui/themes/midnight.css) and the whole tree restyles.',
  },
  {
    q: 'Can I use just one component?',
    a: 'Yes — tree-shaking ships only what you import.',
  },
]

export function Example() {
  return (
    <Accordion type="single" collapsible className="w-[420px]">
      {FAQ_ITEMS.map((item, i) => (
        <AccordionItem key={i} value={`item-${i}`}>
          <AccordionTrigger>{item.q}</AccordionTrigger>
          <AccordionContent>{item.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}