import {  H2, H3, P, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'
interface IStatsSection {
    content: {
        title: string,
        subTitle?: string,
        stats: {
            title: string,
            value: string,
        }[]
    }
}
const StatsSection = ({ content }: IStatsSection) => {
    const t = useTranslations("")
    return (
        <section className='flex flex-col gap-12 justify-center items-center '>
            <div className="flex flex-col gap-2 text-center">
                <H3>{t(content.title)}</H3>
                {content.subTitle && <P>{t(content.subTitle)}</P>}
            </div>
            <ul className='bg-lightBackground flex flex-col lg:flex-row items-center justify-center w-fit lg:w-full gap-20 2xl:gap-40 p-10 '>
                {content.stats.map((stat, i) => (
                    <li key={i} className='flex flex-col gap-4 justify-center items-center text-center text-primary'>
                        <H2 className='2xl:!text-[56px]'>{stat.value}</H2>
                        <S className='max-w-60 text-muted-foreground !text-base'>{t(stat.title)}</S>
                    </li>
                ))}
            </ul>
        </section>
    )
}

export default StatsSection