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 IDadycarChallengeCard2 {
    challenge: {
        problem: string,
        problemDescription?: string,
        sollution: string,
        sollutionDescription: string,
    };
    className?: string
}

const DadycarChallengeCard2 = ({ challenge, className }: IDadycarChallengeCard2) => {
    const t = useTranslations();

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