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

interface IChallengeCard2 {
    challenge: {
        icon: React.ReactNode,
        title: string,
        description?: string
        link?: string
        problem: string,
        sollution: string,
    };
    className?: string
}

const ChallengeCard2 = ({ challenge, className }: IChallengeCard2) => {
    const t = useTranslations();

    return (
        <CustomCard className={` flex flex-col items-center !p-4 gap-4 ${className} w-full bg-white shadow-lg shadow-black/5 border-none`}>
           <div className='bg-[#EFF7FF] w-14 h-14 rounded-md flex flex-col items-center justify-center p-2'>{challenge.icon}</div> 
           <H5>{t(challenge.title)}</H5>
            <div className='p-4 rounded-md bg-[#FDE3E34D] text-left'>
                {challenge?.problem && <span className=" font-semibold text-red-600">{t("Challenge")} :</span>}  {t(challenge?.problem)}
            </div>
            <div className='p-4 rounded-md bg-[#F0FDF4] text-left'>
                {challenge?.sollution && <span className=" font-semibold text-[#16A34A] ">{t("Solution Dadycar")} :</span>}  {t(challenge?.sollution)}
            </div>

        </CustomCard>
    );
};

export default ChallengeCard2;