Accordion

import { Accordion } from '@base-ui/react/accordion';

const FAQ = [
  {
    id: 'cancel',
    question: 'Can I cancel anytime?',
    answer: 'Yes. Your plan stays active until the end of the billing period.'
  },
  {
    id: 'refunds',
    question: 'Do you offer refunds?',
    answer: 'We refund unused months on yearly plans within 30 days.'
  },
  {
    id: 'switch',
    question: 'Can I switch plans later?',
    answer: 'Upgrade or downgrade from Billing; we prorate the difference.'
  }
];

// Without `multiple`, opening one answer closes the one that was open.
export function PricingFaq() {
  return (
    <Accordion.Root
      defaultValue={['cancel']}
      className='w-96 divide-y border-y'
    >
      {FAQ.map(({ id, question, answer }) => (
        <Accordion.Item key={id} value={id}>
          <Accordion.Header>
            <Accordion.Trigger className='group flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium outline-none focus-visible:underline'>
              {question}
              <svg
                viewBox='0 0 16 16'
                fill='none'
                stroke='currentColor'
                strokeWidth={1.5}
                aria-hidden='true'
                className='size-4 shrink-0 transition-transform duration-250 group-data-panel-open:rotate-180'
              >
                <path d='m4 6 4 4 4-4' />
              </svg>
            </Accordion.Trigger>
          </Accordion.Header>
          {/* Base UI measures the answer and exposes it as --accordion-panel-height. */}
          <Accordion.Panel className='h-(--accordion-panel-height) overflow-hidden text-sm text-muted-foreground transition-[height] duration-250 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none'>
            <p className='pb-4'>{answer}</p>
          </Accordion.Panel>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  );
}