'use client';
import React, { useEffect, useState } from 'react';
import { useGlobalContext } from '@/context/Provider';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from '@/components/ui/accordion';

import { ChevronDown, Loader2 } from 'lucide-react';
import apis from '@/utils/apis';

const FAQ = () => {
  const { Toast } = useGlobalContext();
  const [faqs, setFaqs] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchFaqs = async () => {
      try {
        const response = await apis.contact.faq('vendor');

        if (response) {
          setFaqs(response?.data);
        } else {
          throw new Error(response?.message || 'Failed to load FAQs');
        }
      } catch (error: any) {
        Toast?.error(error.message || 'An error occurred while fetching FAQs');
      } finally {
        setLoading(false);
      }
    };

    fetchFaqs();
  }, [Toast]);

  return (
    <section className="question-section common-section-wrapper py-12">
      <div className="container mx-auto max-w-4xl px-4">
        {loading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        ) : (
          <Accordion type="single" collapsible className="space-y-4">
            {faqs?.map((faq: any) => (
              <AccordionItem value={faq?._id} key={faq?._id}>
                <AccordionTrigger className="flex items-center justify-between text-lg font-semibold">
                  <span>{faq?.question}</span>
                  <ChevronDown className="h-5 w-5 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </AccordionTrigger>
                <AccordionContent>
                  <div
                    className="text-muted-foreground"
                    dangerouslySetInnerHTML={{ __html: faq?.answer }}
                  />
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        )}
      </div>
    </section>
  );
};

export default FAQ;