import { Car2Image, LeafSVG, Map5Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const ElectricVehiclesPresentationGraphics2 = () => {
    const t = useTranslations()
    return (
        <div className='flex flex-col gap-4'>
            <div className='flex items-start gap-4 relative scale-[0.55]  lg:scale-90 2xl:scale-100 max-sm:-translate-x-16 '>
                <CustomImage pageTitle={metaTitles?.featuresElectricVehiclesMeta_Title} src={Car2Image} alt='electric vehicle' className='h-[500px] w-[250px] top-14 absolute  left-16    lg:animate-float hover:brightness-105 z-10' />
                <CustomCard className="flex items-center gap-4  min-w-fit ">
                    <div className="flex flex-col gap-2">
                        <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Score")}</S>
                        <S className="max-sm:!text-[11px]  font-normal bg-[#42c275] px-1 text-white rounded">90%</S>
                    </div>
                    <div className="flex flex-col gap-2">
                        <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Charge")}</S>
                        <S className="max-sm:!text-[11px]  font-normal ">350KWh</S>
                    </div>
                    <div className="flex flex-col gap-2">
                        <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("Millage")}</S>
                        <S className="max-sm:!text-[11px]  font-normal ">259Km</S>

                    </div>
                    <div className="flex flex-col gap-2">
                        <S className="max-sm:!text-[11px] text-muted-foreground font-normal">{t("CO2Emission")}</S>
                        <S className="max-sm:!text-[11px]  font-normal flex items-center gap-1 ">0.1 g/km <LeafSVG /></S>

                    </div>
                </CustomCard>
                <CustomCard className='flex flex-col gap-2 min-w-fit'>
                    <H6>{t("Mapping Map")}</H6>
                    <CustomImage pageTitle={metaTitles?.featuresElectricVehiclesMeta_Title} src={Map5Image} alt='electric vehicles map' className='w-[315px]' />
                </CustomCard>
            </div>

        </div>

    )
}

export default ElectricVehiclesPresentationGraphics2