import { ChevronDown } from 'lucide-react'
import { FAQ } from '@/lib/types'
import { Card, CardContent } from '@/components/ui/card'

interface FAQItemProps {
  faq: FAQ
}

export function FAQItem({ faq }: FAQItemProps) {
  return (
    <details className="group bg-card rounded-xl border border-border overflow-hidden transition-all duration-300 open:border-primary/50 open:ring-1 open:ring-primary/20">
      <summary className="flex items-center justify-between p-6 cursor-pointer select-none hover:bg-white/5 transition-colors">
        <span className="text-foreground font-semibold text-lg">{faq.question}</span>
        <ChevronDown className="w-6 h-6 text-primary transition-transform duration-300 group-open:rotate-180" />
      </summary>
      <div className="px-6 pb-6 text-muted-foreground leading-relaxed border-t border-border/50 pt-4">
        {faq.answer}
      </div>
    </details>
  )
}