'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import { useScrollAnimation, fadeInUpClass } from '@/hooks/use-scroll-animation'

interface FAQItem {
    question: string
    answer: string
}

interface FAQProps {
    items: FAQItem[]
    title?: string
    description?: string
    bg?: 'white' | 'lavender'
}

export function FAQ({
    items,
    title = "Frequently Asked Questions",
    description = "Have questions? We're here to help.",
    bg = "white"
}: FAQProps) {
    const { ref, isVisible } = useScrollAnimation()
    return (
        <SectionWrapper bg={bg} id="faq">
            <div ref={ref} className={`text-center mb-12 ${fadeInUpClass(isVisible)}`}>
                <h2 className="text-3xl md:text-4xl font-bold text-navy mb-4">{title}</h2>
                <p className="text-slate-600 max-w-2xl mx-auto">
                    {description}
                </p>
            </div>

            <div className="max-w-3xl mx-auto">
                <Accordion type="single" collapsible className="w-full space-y-4">
                    {items.map((item, index) => (
                        <AccordionItem key={index} value={`item-${index}`} className="border border-slate-200 bg-white rounded-lg px-6 shadow-sm data-[state=open]:border-brand-orange/50 transition-colors">
                            <AccordionTrigger className="text-navy font-bold text-lg hover:no-underline hover:text-brand-orange text-left">
                                {item.question}
                            </AccordionTrigger>
                            <AccordionContent className="text-slate-600 leading-relaxed text-base pb-4">
                                {item.answer}
                            </AccordionContent>
                        </AccordionItem>
                    ))}
                </Accordion>
            </div>
        </SectionWrapper>
    )
}
