import { Value2Card } from '@/components/ui/cards'
import {  H4, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'
interface IValuesSection {
    className?:string,
    content: {
        title: string,
        subTitle?: string,
        values: {
            title: string,
            icon: React.ReactNode,
            link?: string;
            description: string
        }[]
    }
}
const ValuesSection = ({ content,className }: IValuesSection) => {
    const t = useTranslations("")
    console.log(content?.values?.length)
    return (
        <section className='flex flex-col gap-12 justify-center items-center pt-6'>
            <div className='flex items-center flex-col xl:flex-row gap-10 justify-center' >
                <H4 className=''>{t(content.title)}</H4>
                {content?.subTitle && <P className=' max-w-[550px]'>{t(content.subTitle)}</P>}
            </div>
            <ul className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  items-center justify-center gap-5 lg:gap-6  ${className}`}>
                {content.values.map((value, i) => (
                    <li key={i}>
                        <Value2Card value={value} />
                    </li>
                ))}
            </ul>
        </section>
    )
}

export default ValuesSection