import React from 'react';
import { useTranslations } from 'next-intl';
import CustomCard from './CustomCard';
import { H6, P} from '../typography';
import {  BadgeCheckIcon, TriangleAlert } from 'lucide-react';

interface IDadycarChallengeCard {
    challenge: {
            problem: string,
            problemDescription: string,
            sollution: string,
            sollutionDescription: string,
    };
    className?: string
}

const DadycarChallengeCard = ({ challenge, className }: IDadycarChallengeCard) => {
    const t = useTranslations();

    return (
        <div
            className={`flex flex-col  lg:flex-row items-center gap-1 ${className}`}
        >
            <CustomCard className='relative border-amber-500 shadow-md flex flex-col gap-2 p-6 max-sm:w-full w-[520px] lg:w-[450px] xl:w-[520px]'>
               <TriangleAlert fill='#f59e0b' className='left-[-16px] top-[calc(50%-16px)] text-white absolute w-8 h-8'/>
                <H6>{t(challenge.problem)}</H6>
                <P>{t(challenge.problemDescription)}</P>
            </CustomCard>

            <div className='text-gray-400 max-lg:min-h-[30px] opacity-0  lg:min-w-[55px] text-nowrap max-lg:rotate-90  z-[-1]'>- - - - -</div>
            <CustomCard className='relative shadow-md flex flex-col gap-2 p-6 border-primary border-[1px] max-sm:w-full w-[520px] lg:w-[450px] xl:w-[520px]'>
               <BadgeCheckIcon fill='hsl(var(--primary))' className='left-[-16px] top-[calc(50%-16px)] text-white absolute w-8 h-8'/>
                <H6>{t(challenge.sollution)}</H6>
                <P>{t(challenge.sollutionDescription)}</P>
            </CustomCard>
           
        </div>
    );
};

export default DadycarChallengeCard;