import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";
import Heading from "./Heading";

const FaqContent = ({ data,title }) => {
  // console.log(data,"data")
  return (
    <>
      <div className="faq-area">
        <div className="container">
          <div className="section-title">
            {/* <span className="sub-title">{heading.Subtitle}</span> */}
            <Heading el="h2" heading={title} />
          </div>
          <div className="faq-accordion">
            <Accordion allowZeroExpanded preExpanded={'0'}>
              {data?.map((item, index) => (
                <AccordionItem uuid={index.toString()} key={index}>
                  <AccordionItemHeading>
                    <AccordionItemButton>
                      {item.Title}
                    </AccordionItemButton>
                  </AccordionItemHeading>
                  <AccordionItemPanel>
                    <div dangerouslySetInnerHTML={{ __html: item.Description }} />
                  </AccordionItemPanel>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </>
  );
};

export default FaqContent;