"use client";
import React, { useState } from 'react';
import styles from '../../app/(pages)/faqs/page.module.css';

type FaqData={
    faqId: number,
    title: string,
    description:string,
    type: string,
    status: number
}

const Faq = ({faqList}:{faqList:FaqData[]}) => {
    // console.log('faqList')
    const faqsData = [
        {
            question: 'Want to become as a vendor',
            answer: 'To become as a vendor, go to the sell now section, fill out the bank details, and now you are a vendor.',
            // buyer:'Buyer',
            // vendor:'Vendor'
        },
        {
            question: 'Want to become as a vendor',
            answer: 'To become as a vendor, go to the sell now section, fill out the bank details, and now you are a vendor.',
            // buyer:'Buyer'
        },
        
      ];
    
      const [activeIndex, setActiveIndex] = useState(null);
    
      const handleAccordionClick = (index:any) => {
        setActiveIndex(activeIndex === index ? null : index);
      };
    
  return (
    <div className={styles.commonConentSection}>
        <div className="container">
          <div className={styles.commonConentWrap}>
            <h2>FAQs</h2>
           
          </div>


          <div className={styles.faqsSection}>
              <div className={styles.faqsRows}>
                {faqList?.map((faq:FaqData, index:number) => (
                  <div className={`${styles.faqsBoxWrap}  ${activeIndex === index ? styles.active : ''}`} key={index}>
                    <div className={styles.faqsBoxHead} onClick={() => handleAccordionClick(index)}>
                        <span className={styles.toggleIcon}></span>
                      <h3>{faq?.title}</h3>
                    </div>
                    {activeIndex === index && (
                      <div className={styles.faqsBoxBody}>
                        <p>{faq?.description}</p>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
        </div>
      </div>
  )
}

export default Faq