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

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

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

    return (
        <CustomCard
            className={`flex  flex-col justify-center items-start p-6 gap-6 border-none shadow-md  ${isOdd && isLast ? 'lg:col-span-2' : ''} ${className}`}
        >
            <div className='flex items-center gap-4'>
                <div className="w-8 h-8 sm:min-w-12 sm:min-h-12 flex justify-center items-center rounded-sm bg-primary/10   ">
                    {feature.icon}
                </div>
                <H5  className='text-start'>{t(feature.title)}</H5>
            </div>
            <div className='flex flex-col items-start min-h-[100px]'>
                {feature?.description && <P className="   text-left">{t(feature?.description)}</P>}
                {feature.link && (
                    <ArrowText link={feature.link} className="pt-3">
                        {t('More details')}
                    </ArrowText>
                )}
            </div>
        </CustomCard>
    );
};

export default WhyUsCard2;