'use client'

import React, { useState } from 'react'
import { Plus, Minus } from 'lucide-react'
import { AnimateIn } from '@/components/AnimateIn'

interface FaqItem {
  question: string
  answer: string
}

interface FaqAccordionBlockProps {
  badge?: string
  heading: string
  subheading?: string
  items?: FaqItem[]
}

export function FaqAccordionBlockComponent(props: FaqAccordionBlockProps) {
  const { badge, heading, subheading, items } = props
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  const toggle = (idx: number) => {
    setOpenIndex(openIndex === idx ? null : idx)
  }

  return (
    <section className="py-24 bg-surface-gray border-b-2 border-dark">
      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-4xl">
        <AnimateIn direction="up">
          <div className="max-w-3xl mb-14 text-center mx-auto">
            {badge && (
              <div className="inline-block bg-dark text-primary text-xs font-black uppercase tracking-widest px-3 py-1 mb-4">
                {badge}
              </div>
            )}
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-dark">
              {heading}
            </h2>
            {subheading && (
              <p className="mt-4 text-base text-muted-text leading-relaxed font-medium">
                {subheading}
              </p>
            )}
          </div>
        </AnimateIn>

        {items && items.length > 0 && (
          <div className="space-y-3">
            {items.map((item, idx) => {
              const isOpen = openIndex === idx
              return (
                <AnimateIn key={idx} delay={idx * 100} direction="up">
                  <div
                    className="border-2 border-dark bg-white transition-all hover-lift"
                  >
                    <button
                      type="button"
                      onClick={() => toggle(idx)}
                      className="w-full flex items-center justify-between p-6 text-left hover:bg-[#f8f8f8] transition-colors"
                    >
                      <span className="text-sm sm:text-base font-black uppercase text-dark pr-4">
                        {item.question}
                      </span>
                      <div className="h-7 w-7 flex items-center justify-center bg-primary text-dark border border-dark shrink-0 font-bold">
                        {isOpen ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
                      </div>
                    </button>
                    {isOpen && (
                      <div className="px-6 pb-6 pt-2 text-sm text-[#444444] leading-relaxed border-t-2 border-[#f0f0f0]">
                        {item.answer}
                      </div>
                    )}
                  </div>
                </AnimateIn>
              )
            })}
          </div>
        )}
      </div>
    </section>
  )
}