"use client";

import React, { useEffect } from "react";
import "./Faq.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import { Accordion } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { getFaq } from "../../features/faq/Slice";
import parse from "html-react-parser";

function Faq() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Faq", link: "", isActive: true },
  ];

  const faq = useSelector((state) => state.faq.getfaq);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getFaq());
  }, []);

  return (
    <>
      <section className="Faq_page_holder">
        {/* <Breadcrumb_comp breadcrumbs={breadcrumbs} /> */}
        <div className="container">
          <div className="heading_holder ">
            <h4 className="heading_text">FAQ's</h4>{" "}
          </div>
          <div className="faq_holder">
            <Accordion defaultActiveKey="0">
              {faq?.length > 0 ? (
                faq.map((faqItem, index) => (
                  <Accordion.Item
                    className="outer_accordion_item"
                    eventKey={String(index)}
                    key={`faq-${index}`}
                  >
                    {/* <div className="heading_holder">
                      <h6>{faqItem?.name}</h6>
                    </div> */}

                    <div className="inner_accordion_holder">
                      <Accordion
                        defaultActiveKey={index === 0 ? String(index) : ""}
                      >
                        <Accordion.Item
                          className="inner_accordion_item"
                          eventKey={String(index)}
                          key={`faq-inner-${index}`}
                        >
                          <Accordion.Header className="">
                            {faqItem?.question ? parse(faqItem.question) : ""}
                          </Accordion.Header>
                          <Accordion.Body className="">
                            {faqItem?.answer ? parse(faqItem.answer) : ""}
                          </Accordion.Body>
                        </Accordion.Item>
                      </Accordion>
                    </div>
                  </Accordion.Item>
                ))
              ) : (
                <div className="no_product_available_holder">
                  <h3>No FAQS Available</h3>
                </div>
              )}
            </Accordion>
          </div>
        </div>
      </section>
    </>
  );
}

export default Faq;
