export type FAQItem = {
  question: string;
  answer: string;
};

type Props = {
  items: FAQItem[];
  locale: 'ar' | 'en';
};

export default function FAQAccordion({ items }: Props) {
  const groupName = 'faq-accordion';

  return (
    <div className="space-y-2">
      {items.map((item, index) => (
        <div key={index} className="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box">
          <input
            type="radio"
            name={groupName}
            defaultChecked={index === 0}
          />
          <div className="collapse-title font-semibold text-base-content">{item.question}</div>
          <div className="collapse-content whitespace-pre-line text-base-content/70">{item.answer}</div>
        </div>
      ))}
    </div>
  );
}