import { ValueCard } from '@/components/ui/cards'
import { H2, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'
interface IValuesSection {
    content: {
        title: string,
        subTitle: string,
        values: {
            title: string,
            icon: React.ReactNode,
            description: string
        }[]
    }
}
const ValuesSection = ({ content }: IValuesSection) => {
    const t = useTranslations("")
    return (
        <section className='flex flex-col gap-12 justify-center items-center '>
            <div className='flex items-center flex-col xl:flex-row gap-10 justify-center' >
                <H2 as='h3' className='min-w-[280px] sm:min-w-[400px]  max-w-[510px] '>{t(content.title)}</H2>
                <P className=' max-w-[510px]'>{t(content.subTitle)}</P>
            </div>
            <ul className='grid grid-cols-1 lg:grid-cols-3 items-center justify-center gap-5 lg:gap-6'>
                {content.values.map((value, i) => (
                    <li key={i}>
                        <ValueCard content={value} />
                    </li>
                ))}
            </ul>
        </section>
    )
}

export default ValuesSection