Accordion

'use client';

import * as React from 'react';
import { FaqAccordion } from './faq-accordion';

const ITEMS = [
  {
    question: 'Can I change my plan later?',
    answer:
      'Yes. You can move to a larger or smaller plan at any time, and the new price starts on your next bill.',
  },
  {
    question: 'Is there a free trial?',
    answer: 'Every plan starts with 14 free days. We ask for a card only when the trial ends.',
  },
  {
    question: 'How does yearly billing work?',
    answer: 'You pay for twelve months at once and save 20% compared with paying each month.',
  },
  {
    question: 'Can I cancel at any time?',
    answer:
      'Yes. Your plan stays active until the end of the period you paid for, and we do not charge you again.',
  },
];

export default function FaqAccordionDemo({ replay = 0 }: { replay?: number }) {
  const ref = React.useRef<HTMLDivElement>(null);

  // Replay closes the open answer, then opens the second question, the same way a click does.
  React.useEffect(() => {
    if (replay === 0) return;
    const triggers = () => [
      ...(ref.current?.querySelectorAll<HTMLButtonElement>('[data-slot="faq-accordion"] h3 button') ?? []),
    ];
    for (const trigger of triggers()) if (trigger.hasAttribute('data-open')) trigger.click();
    const timer = window.setTimeout(() => triggers()[1]?.click(), 500);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div ref={ref} className="w-full max-w-md">
      <FaqAccordion items={ITEMS} defaultOpen={[0]} />
    </div>
  );
}