import React from 'react'
import CustomCard from './CustomCard'
import { useTranslations } from 'next-intl'
import { H4, P } from '../typography'
interface IInfoCard {
    content: {
        icon: React.ReactNode
        title: string,
        description: string
    }
    className?: string
}
const InfoCard = ({ content, className }: IInfoCard) => {
    const t = useTranslations()
    return (
        <CustomCard className={` hover:shadow-xl duration-150 hover:scale-[1.02] hover:border-primary flex flex-col gap-1 w-full sm:w-[370px] z-10 p-5 ${className}  shadow-xl shadow-black/5 `}>
            <div className='flex items-center gap-2'>
                <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>
                <H4>{t(content.title)}</H4>
            </div>
            <P>{t(content.description)}</P>
        </CustomCard>
    )
}

export default InfoCard