import React from 'react'
import { useTranslations } from 'next-intl'
import { H2, P } from '../typography'
import CustomCard from './CustomCard'
interface IValueCard {
    content: {
        icon: React.ReactNode
        title: string,
        description: string
    }
    className?: string
}
const ValueCard = ({ content, className }: IValueCard) => {
    const t = useTranslations()
    return (
        <CustomCard className={` flex flex-col gap-1 max-w-[340px]  z-10 p-6 ${className}  shadow-xl shadow-black/5`}>
            <div className='flex items-center gap-3'>
                <H2 as='h3'>{content.title}</H2>
                <div className='bg-primary/10 w-10 h-10 lg:w-12 lg:h-12 rounded-md flex items-center justify-center'>
                    {content.icon}
                </div>
            </div>
            <P>{t(content.description)}</P>
        </CustomCard>
    )
}

export default ValueCard