"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());

    }, [])

    console.log(faq, " faq faq")

    return (
        <>

            <section className='Faq_page_holder'>
                <Breadcrumb_comp breadcrumbs={breadcrumbs} />
                <div className="container">
                    <div className='heading_holder mb-5'><h4 className='heading_text'>FAQs</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="0">
                                                {faq?.map((faqs, idx) => (
                                                    <Accordion.Item className='inner_accordion_item' eventKey={String(idx)} key={`faq-inner-${index}-${idx}`}>
                                                        <Accordion.Header className=''>{parse(faqs?.question)}</Accordion.Header>
                                                        <Accordion.Body className=''>{parse(faqs?.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
