'use client'

import { useState } from 'react'
import { Plus, Minus } from 'lucide-react'

interface FAQItem {
  q: string
  a: string
}

interface ServiceFAQProps {
  faqs: FAQItem[]
  accentColor?: string
}

export function ServiceFAQ({ faqs, accentColor = 'blue' }: ServiceFAQProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  const colorMap: Record<string, { hover: string; active: string; border: string; dot: string }> = {
    blue: { hover: 'hover:text-blue-600', active: 'bg-blue-500 shadow-md shadow-blue-500/20', border: 'hover:border-blue-100', dot: 'bg-blue-500' },
    cyan: { hover: 'hover:text-cyan-600', active: 'bg-cyan-500 shadow-md shadow-cyan-500/20', border: 'hover:border-cyan-100', dot: 'bg-cyan-500' },
    emerald: { hover: 'hover:text-emerald-600', active: 'bg-emerald-500 shadow-md shadow-emerald-500/20', border: 'hover:border-emerald-100', dot: 'bg-emerald-500' },
    violet: { hover: 'hover:text-violet-600', active: 'bg-violet-500 shadow-md shadow-violet-500/20', border: 'hover:border-violet-100', dot: 'bg-violet-500' },
    amber: { hover: 'hover:text-amber-600', active: 'bg-amber-500 shadow-md shadow-amber-500/20', border: 'hover:border-amber-100', dot: 'bg-amber-500' },
  }

  const colors = colorMap[accentColor] || colorMap.blue

  return (
    <div className="space-y-3">
      {faqs.map((faq, index) => (
        <div key={index} className={`rounded-xl border border-slate-100 bg-white overflow-hidden ${colors.border} transition-colors`}>
          <button
            onClick={() => setOpenIndex(openIndex === index ? null : index)}
            className="w-full p-6 flex items-center justify-between text-left group"
          >
            <h3 className={`text-base font-semibold text-[#081B33] ${colors.hover} transition-colors pr-4`}>
              {faq.q}
            </h3>
            <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-300 ${
              openIndex === index ? colors.active : 'bg-slate-50 group-hover:bg-blue-50'
            }`}>
              {openIndex === index ? (
                <Minus className="w-4 h-4 text-white" />
              ) : (
                <Plus className="w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors" />
              )}
            </div>
          </button>
          {openIndex === index && (
            <div className="px-6 pb-6">
              <p className="text-sm text-slate-500 leading-relaxed">{faq.a}</p>
            </div>
          )}
        </div>
      ))}
    </div>
  )
}