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

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

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

    return (
        <CustomCard
            className={`flex  justify-center items-start gap-3 sm:gap-8  ${isOdd && isLast ? 'lg:col-span-2' : ''} ${className}`}
        >
            <CustomCard className='border-none shadow-lg flex flex-col items-center min-w-[70px] sm:min-w-[85px]'>
                <div className="w-8 h-8 sm:w-12 sm:h-12 flex justify-center items-center rounded-lg ">
                    {feature.icon}
                </div>
                    <S className='!text-[12px]'>{t(feature.iconTitle)}</S>
            </CustomCard>
            <div className='flex flex-col items-start'>
                <H5  className='max-sm:!text-[14px] text-left'>{t(feature.title)}</H5>
                {feature?.description && <P className="max-w-96 min-h-24 text-left">{t(feature?.description)}</P>}
                {feature.link && (
                    <ArrowText link={feature.link} className="pt-3">
                        {t('More details')}
                    </ArrowText>
                )}
            </div>
        </CustomCard>
    );
};

export default TopFeatureCard;