import { TestemonialsCarousel } from '@/components/ui/carousel'
import { H2, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import { StaticImageData } from 'next/image'
import React from 'react'

interface ITestomonialsSection {
    content: {
        title?: string,
        subTitle?: string
        testemonials: {
            image: StaticImageData | string,
            quote: string,
            name: string,
            description: string
            scale?: number,
        }[],
    },
    isShowHeader?: boolean
}
const TestomonialsSection = ({ content, isShowHeader = false }: ITestomonialsSection) => {
    const t = useTranslations()
    
    return (
        <section className='flex flex-col justify-center items-center gap-8 lg:gap-[72px]'>
            {isShowHeader && (
                <div className='text-center flex flex-col gap-2'>
                    {content.title && <H2 className='lg:!text-[24px] !text-[#27272A] !font-[600]'>{t(content.title)}</H2>}
                    {content.subTitle && <P className='lg:!text-[18px] !text-[#71717A] !font-[400]'>{t(content.subTitle)}</P>}
                </div>
            )}
            <TestemonialsCarousel elements={content.testemonials} />
        </section>
    )
}

export default TestomonialsSection