"use client";

import React, { useState, useEffect, useCallback } from "react";
import { CaretRightOutlined } from "@ant-design/icons";
import axios from "@/utils/axios-config";
import { Collapse, Skeleton } from "antd";
import { store } from "@/store/store";

const FaqItems: React.FC = () => {
  const [faqs, setFaqs] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const language = "en";

  // useEffect(() => {
  //   const fetchFaqData = async () => {
  //     try {
  //       const response = await fetch(
  //         `https://backend.outletplus.sa/api/faqs?skip&take`,
  //         {
  //           cache: "no-store",
  //           headers: {
  //             "X-Language": (store.getState() as any)?.LanguageSwitcher?.language,
  //           },
  //         }
  //       );
  //       const data = await response.json();

  //       if (data.status) {
  //         setFaqs(data.data);
  //       } else {
  //         setError("Failed to load FAQ data.");
  //       }
  //     } catch (err) {
  //       setError("Error fetching FAQ data.");
  //     } finally {
  //       setLoading(false);
  //     }
  //   };

  //   fetchFaqData();
  // }, []);
useEffect(() => {
    const fetchFaqsData = async () => {
      try {
        const response = await axios.get(`/faqs`);

        const data = await response?.data?.data;

        setFaqs(data);
      } catch (err: any) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchFaqsData();
  }, []);
  const panelStyle: React.CSSProperties = {
    marginBottom:"24px",
    border: "none",
  };

  const expandIcon = useCallback(
    (panelProps: { isActive?: boolean }) => (
      <CaretRightOutlined rotate={panelProps.isActive ? 90 : 0} />
    ),
    []
  );

  const getItems = () => {
    return faqs.map((faq) => ({
      key: faq.id.toString(),
      label: (
        <h3 className="text-[#199A8E] text-[20px] font-[400]">
          {faq.question}
        </h3>
      ),
      children: (
        <p className="text-[#515B60] text-[18px] font-[400]">{faq.answer}</p>
      ),
      style: {
        ...panelStyle,
        marginBottom: "20px",
        backgroundColor: "#F5F5F5",
        borderRadius: "15px",
        padding: "5px",
      },
    }));
  };

  if (loading) {
    return (
      <section className="pt-[100px] pb-[70px]">
        <div className="container mx-auto space-y-6">
          <Skeleton active paragraph={{ rows: 5 }} />
          <Skeleton active paragraph={{ rows: 3 }} />
          <Skeleton active paragraph={{ rows: 4 }} />
        </div>
      </section>
    );
  }

  if (error) {
    return <div className="text-red-500 text-center">{error}</div>;
  }

  return (
    <section className="pt-[100px] pb-[70px]">
      <div className="container mx-auto">
        <Collapse
          bordered={false}
          defaultActiveKey={["1"]}
          expandIcon={expandIcon}
          expandIconPosition="end"
          className="px-[20px] py-[30px] rounded-lg bg-[#fff]"
          items={getItems()}
        />
      </div>
    </section>
  );
};

export default FaqItems;