'use client';

import { getFAQData } from '@/lib/db/dashboard';
import { useState } from 'react';

const FAQ = () => {
  const [openFAQs, setOpenFAQs] = useState<number[]>([]);
  const faqData = getFAQData();

  const toggleFAQ = (id: number) => {
    setOpenFAQs((prev) => {
      if (prev.includes(id)) {
        return prev.filter((faqId) => faqId !== id);
      } else {
        return [...prev, id];
      }
    });
  };

  const isFAQOpen = (id: number) => openFAQs.includes(id);

  return (
    <section className="py-16 bg-blue-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-center text-blue-900 mb-10">
          সচরাচর জিজ্ঞাসিত প্রশ্নাবলী
        </h2>
        <div className="space-y-4">
          {faqData.map((faq) => (
            <div
              key={faq.id}
              className="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden"
            >
              <button
                className="w-full flex items-center justify-between p-6 text-left focus:outline-none hover:bg-gray-50 transition-colors"
                onClick={() => toggleFAQ(faq.id)}
                aria-expanded={isFAQOpen(faq.id)}
              >
                <span className="font-bold text-gray-800 text-lg">{faq.question}</span>
                <span
                  className={`material-symbols-outlined text-blue-500 transition-transform duration-300 ${
                    isFAQOpen(faq.id) ? 'rotate-180' : ''
                  }`}
                >
                  expand_more
                </span>
              </button>
              <div
                className={`px-6 pb-6 text-gray-600 transition-all duration-300 ${
                  isFAQOpen(faq.id) ? 'block' : 'hidden'
                }`}
              >
                {faq.answer}
              </div>
            </div>
          ))}
        </div>
        <div className="text-center mt-10">
          <p className="text-gray-500">
            আরও প্রশ্ন আছে?{' '}
            <a href="#" className="text-blue-600 font-bold hover:underline">
              আমাদের হেল্পলাইনে যোগাযোগ করুন
            </a>
          </p>
        </div>
      </div>
    </section>
  );
};

export default FAQ;