// app/components/ui/FAQItem.tsx

import { ChevronDown, ChevronUp } from 'lucide-react';

interface FAQItemProps {
    id: string;
    question: string;
    answer: string;
    isOpen: boolean;
    onToggle: (id: string) => void;
}

export function FAQItem({ id, question, answer, isOpen, onToggle }: FAQItemProps) {
    return (
        <div className={`rounded-xl overflow-hidden transition-colors ${isOpen ? 'bg-white/80 shadow-sm' : 'bg-white/40 hover:bg-white/60'}`}>
            <button
                className="w-full text-left p-3 flex justify-between items-center focus:outline-none"
                onClick={() => onToggle(id)}
            >
                <span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{question}</span>
                <div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : 'text-seafoam'}`}>
                    {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </div>
            </button>

            {/* The CSS Grid accordion trick */}
            <div className={`grid transition-all duration-300 ease-in-out ${isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
                <div className="overflow-hidden">
                    <div className="p-2 pb-3 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/20 mx-4">
                        {answer}
                    </div>
                </div>
            </div>
        </div>
    );
}