import FaqSchema from '@/components/seo/FaqSchema';
import { PrimaryAccordion } from '@/components/ui/accordion';
import { H3, P } from '@/components/ui/typography';
import { useTranslations } from 'next-intl';
import React, { ReactNode } from 'react'

interface IFaqSection {
  accordionStyles?:string
  headersStyles?:string
    content: {
        title: string;
        subTitle?: string,
        subTitle1?: string,
        faqs: {
            title: string,
            icon?:ReactNode
            description: string,
            descriptionPoints?: { pointTitle?: string, pointDescription: string }[]
            descriptionPoints2?: { pointTitle?: string, pointDescription: string }[]
            descriptionPoints3?: { pointTitle?: string, pointDescription: string }[]
            descriptionPoints4?: { pointTitle?: string, pointDescription: string }[]
            descriptionPoints5?: { pointTitle?: string, pointDescription: string }[]
            descriptionPoints6?: { pointTitle?: string, pointDescription: string }[]
            description2?: string,
            description3?: string,
            description4?: string,
            description5?: string,
            description6?: string,
            description7?: string,
        }[]
    }
}
const FaqSection = ({ content,headersStyles ,accordionStyles}: IFaqSection) => {
    const t = useTranslations()
    return (
        <>
              {<FaqSchema content={content} />}

        <div className='flex flex-col gap-14 items-center'>
            
            <div className={`flex flex-col gap-4 text-center ${headersStyles }`}>
                <H3 className='!max-sm:text-[12px]'>{t(content.title)}</H3>
                <div>
                    {content.subTitle && <P>{t(content.subTitle)}</P>}
                    {content.subTitle1 && <P>{t(content.subTitle1)}</P>}
                </div>
            </div>
            <div className={`w-[320px] sm:w-[500px] lg:w-[840px] ${accordionStyles}`}>
                <PrimaryAccordion items={content.faqs} />
            </div>
        </div>
        </>

    )
}

export default FaqSection