'use client'

import { useState } from 'react'
import * as motion from 'framer-motion/m'
import { AnimatePresence } from 'framer-motion'
import { useTranslations } from 'next-intl'
import { ChevronDown, HelpCircle } from 'lucide-react'

interface FAQ {
  question: string
  answer: string
}

interface ProductFAQsProps {
  faqs: FAQ[]
}

export default function ProductFAQs({ faqs }: ProductFAQsProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null)
  const t = useTranslations('ProductDetail')

  if (!faqs || faqs.length === 0) {
    return (
      <div className="text-center py-8">
        <HelpCircle size={48} className="mx-auto text-gray-custom mb-3" />
        <p className="text-gray-custom">{t('noFaqs')}</p>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {faqs.map((faq, index) => (
        <div key={index} className="border border-gray-100 rounded-xl overflow-hidden">
          <button
            onClick={() => setOpenIndex(openIndex === index ? null : index)}
            className="w-full flex justify-between items-center p-4 text-left hover:bg-gray-50 transition-colors"
          >
            <span className="font-medium text-dark">{faq.question}</span>
            <ChevronDown
              size={18}
              className={`text-gray-custom transition-transform ${
                openIndex === index ? 'rotate-180' : ''
              }`}
            />
          </button>
          <AnimatePresence>
            {openIndex === index && (
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: 'auto', opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                className="overflow-hidden"
              >
                <div className="p-4 pt-0 text-gray-custom text-sm leading-relaxed border-t border-gray-100">
                  {faq.answer}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      ))}
    </div>
  )
}