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

interface IFeatureCard {
    feature: {
        icon: React.ReactNode;
        title: string;
        description?: string;
        link?: string;
    };
    isOdd?: boolean;
    isLast?: boolean;
    className?: string
}

const FeatureCard = ({ feature, isOdd, isLast, className }: IFeatureCard) => {
    const t = useTranslations();

    return (
        <CustomCard
            className={`flex flex-col justify-center items-center gap-1  ${isOdd && isLast ? 'lg:col-span-3' : ''} ${className}`}
        >
            <div className="w-12 h-12 flex justify-center items-center rounded-lg bg-primary/10">
                {feature.icon}
            </div>
            <H5 className="pt-1">{t(feature.title)}</H5>
            {feature?.description && <P className="max-w-72 min-h-24">{t(feature?.description)}</P>}
            {feature.link && (
                <ArrowText link={feature.link} className="pt-3">
                    {t('More details')}
                </ArrowText>
            )}
        </CustomCard>
    );
};

export default FeatureCard;