import React from 'react';
import { H5, P } from '../typography';
import { useTranslations } from 'next-intl';
import CustomCard from './CustomCard';
import ArrowText from '../typography/ArrowText';

interface IValue2Card {
    value: {
        icon: React.ReactNode;
        title: string;
        link?: string;
        description?: string;
    };

    className?: string
}

const Value2Card = ({ value, className }: IValue2Card) => {
    const t = useTranslations();

    return (
        <CustomCard
            className={`flex flex-col justify-center  gap-3 ${className} p-4  border-none shadow`}
        >
            <div className='flex items-center justify-center'>
                <div className="w-32  flex justify-center items-center rounded-full px-7 py-2   bg-primary/10">
                    {value.icon}
                </div>
            </div>
            <H5 className="pt-1 max-w-80 min-h-16 flex items-center">{t(value.title)}</H5>
            {value?.description && <P className="max-w-80 min-h-24">{t(value?.description)}</P>}
            {value?.link &&                 <ArrowText link={value?.link} className='pt-2 text-nowrap text-center w-full flex items-center justify-center'>{t("Learn More")}</ArrowText>
}
        </CustomCard>
    );
};

export default Value2Card;