Faq Accordion

import { useState } from "react";

const faqs = [
  { question: "How do I install these components?", answer: "You don't need to install anything! Just copy and paste the code directly into your React or Next.js project. It works out of the box with Tailwind CSS." },
  { question: "Is it completely free?", answer: "Yes, all components are open-source and free to use for both personal and commercial projects. No attribution required, though it's always appreciated!" },
  { question: "Do you support dark mode?", answer: "Most of our components are designed with dark mode variants in mind, using standard Tailwind dark: classes." }
];

export function FAQAccordion() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <div className="max-w-2xl mx-auto py-16 px-4">
      <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Frequently Asked Questions</h2>
      
      <div className="space-y-4">
        {faqs.map((faq, index) => {
          const isOpen = openIndex === index;
          
          return (
            <div 
              key={index} 
              className={`border border-gray-200 rounded-xl overflow-hidden transition-all duration-300 ${isOpen ? 'bg-blue-50/50 shadow-md border-blue-200' : 'bg-white hover:border-gray-300'}`}
            >
              <button
                className="w-full px-6 py-4 flex items-center justify-between focus:outline-none"
                onClick={() => setOpenIndex(isOpen ? null : index)}
              >
                <span className="font-semibold text-gray-900 text-left">{faq.question}</span>
                <span className={`flex-shrink-0 ml-4 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}>
                  <svg className="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </span>
              </button>
              
              <div 
                className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}
              >
                <div className="p-6 pt-0 text-gray-600 leading-relaxed">
                  {faq.answer}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}