import { ErrorOdomoter, Map2Image, WarningCircleX, Zero2Bars } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { CustomCard } from "@/components/ui/cards";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import {  H6, P } from "@/components/ui/typography";
import { useTranslations } from "next-intl";


const ConducteursPresentationGraphics2 = () => {
    const t = useTranslations()

    return (
        <div className="flex justify-center w-full 2xl:w-fit">
            <div className="flex flex-col 2xl:flex-row gap-4 w-full">
                <div className="flex flex-col gap-4">
                    <CustomCard className='flex items-center gap-4 w-full 2xl:max-w-[321px] border-none shadow-lg '>
                        <div className='min-w-12 h-12 text-amber-400 bg-amber-100 rounded-full flex justify-center items-center'>
                            <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} className="w-[48px] h-[48px]" src={Zero2Bars} alt="driver safety score" />
                        </div>
                        <div className='flex flex-col gap-2'>
                            <H6>{t("Driver’s License Expired")}</H6>
                            <P>{t("High-risk behavior detected on the downtown route. Consider alternative paths")}</P>
                        </div>
                    </CustomCard>
                    <CustomCard className='flex items-center gap-4 w-full 2xl:max-w-[321px] border-none shadow-lg '>
                        <div className='min-w-12 h-12 text-green-400 bg-green-100 rounded-full flex justify-center items-center'>
                            <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} className="w-[48px] h-[48px]" src={WarningCircleX} alt="driver behavior alert" />
                        </div>
                        <div className='flex flex-col gap-2'>
                            <H6>{t("Leasing Contract Renew")}</H6>
                            <P>{t("Driver Jane Smith applied sudden braking 3 times during today's trip.")}</P>
                        </div>
                    </CustomCard>
                    <CustomCard className='flex items-center gap-4 w-full 2xl:max-w-[321px] border-none shadow-lg '>
                        <div className='min-w-12 h-12 text-red-500 bg-red-100 rounded-full flex justify-center items-center'>
                            <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} className="w-[48px] h-[48px]" src={ErrorOdomoter} alt="odometer alert" />
                        </div>
                        <div className='flex flex-col gap-2'>
                            <H6>{t("Insurance Expired")}</H6>
                            <P>{t("Driver John Doe exceeded the speed limit on Route 16 by 20 km/h.")}</P>
                        </div>
                    </CustomCard>
                </div>
                <CustomCard className="w-full 2xl:w-[400px]  p-6 ">
                    <CustomImage pageTitle={metaTitles?.featuresConducteurMeta_Title} src={Map2Image} alt="trip_map" className="w-full h-full object-cover" />
                </CustomCard>
            </div>
        </div>

    );
};

export default ConducteursPresentationGraphics2;