'use client';

import React, { useState } from 'react';
import { faqData, FaqItem } from '@/content/faq';
import { ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';

interface FaqAccordionProps {
  category: FaqItem['category'];
}

export const FaqAccordion = ({ category }: FaqAccordionProps) => {
  const [openId, setOpenId] = useState<string | null>(null);
  
  const faqs = faqData.filter(item => item.category === category);
  
  if (faqs.length === 0) return null;

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4 md:px-8 max-w-3xl">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold text-primary mb-4">Często zadawane pytania</h2>
          <p className="text-gray-600">
            Odpowiedzi na najczęstsze wątpliwości naszych klientów.
          </p>
        </div>
        
        <div className="space-y-4">
          {faqs.map((faq) => {
            const isOpen = openId === faq.id;
            return (
              <div 
                key={faq.id} 
                className={cn(
                  "bg-white border rounded-xl overflow-hidden transition-all duration-200",
                  isOpen ? "border-accent shadow-md" : "border-gray-200 hover:border-gray-300"
                )}
              >
                <button
                  className="w-full px-6 py-4 flex items-center justify-between text-left focus:outline-none"
                  onClick={() => setOpenId(isOpen ? null : faq.id)}
                  aria-expanded={isOpen}
                >
                  <span className="font-semibold text-primary pr-4">{faq.question}</span>
                  <ChevronDown 
                    className={cn(
                      "w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0",
                      isOpen && "rotate-180 text-accent"
                    )} 
                  />
                </button>
                
                <div 
                  className={cn(
                    "px-6 text-gray-600 leading-relaxed overflow-hidden transition-all duration-300 ease-in-out",
                    isOpen ? "max-h-96 pb-5 opacity-100" : "max-h-0 pb-0 opacity-0"
                  )}
                >
                  <div className="pt-2 border-t border-gray-100">
                    {faq.answer}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};