'use client';

import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';

interface FAQItem {
  id: string;
  question: string;
  answer: string;
}

interface FAQAccordionProps {
  items: FAQItem[];
}

export default function FAQAccordion({ items }: FAQAccordionProps) {
  return (
    <Accordion.Root type="single" collapsible className="w-full">
      {items.map((item, index) => (
        <Accordion.Item key={item.id} value={item.id} className="border-b border-slate-700 py-6">
          <Accordion.Trigger className="group flex w-full items-center justify-between text-left">
            <h3 className="font-almarai text-lg font-bold uppercase tracking-wide text-white transition-colors duration-300 group-hover:cursor-pointer md:text-xl">
              {item.question}
            </h3>
            <div className="ml-4 shrink-0">
              <ChevronDown
                className="h-6 w-6 text-red-600 transition-transform duration-300 group-data-[state=open]:rotate-180"
                aria-hidden="true"
              />
            </div>
          </Accordion.Trigger>

          <Accordion.Content className="overflow-hidden pt-4 text-gray-400 animate-in fade-in slide-in-from-top-2 duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-2">
            <p className="font-almarai leading-relaxed text-sm md:text-base">{item.answer}</p>
          </Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  );
}