import { Car9Image, FuelSVG, MapSVG, SpeedMeterSVG } 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 { InfoIcon, Link } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const OEMHeroGraphics = () => {
    const t = useTranslations()
    return (
        <div className=' flex flex-col justify-center items-center max-xl:scale-[0.7] max-sm:scale-[0.5] max-lg:mt-8  '>
            <div className='relative w-[541px] h-[317px]'>
                <CustomImage pageTitle={metaTitles?.integrationsOEMMeta_Title} priority={true} src={Car9Image} alt='vehicle oem' className='w-full h-full object-cover' />
                <CustomCard className='flex flex-col gap-5 absolute  top-[-120px] left-[45%] border-none shadow-lg w-[380px] '>
                    <H6>{t("Automatic Alerts")}</H6>
                    <div className='flex flex-col gap-4 pl-3'>
                        <div className='flex items-center  gap-20'>
                            <S>{t("Tire  low pressure")}</S>
                            <S className='text-muted-foreground !font-normal'>16/07/2024</S>
                        </div>
                        <div className='flex items-center  gap-20'>
                            <div className='flex items-center gap-1'>
                                <InfoIcon className='fill-destructive text-white w-6 h-6' />
                                <S>{t("Critical Priority")}</S>
                            </div>
                            <S className='bg-amber-400 py-2 px-4 text-white rounded-full'>{t("Open")}</S>
                        </div>

                    </div>
                    <div className='flex flex-col gap-4 pl-3'>
                        <div className='flex items-center  gap-20'>
                            <S>{t("Replace car Battery")}</S>
                            <S className='text-muted-foreground !font-normal'>16/09/2024</S>
                        </div>
                        <div className='flex items-center  gap-20'>
                            <div className='flex items-center gap-1'>
                                <InfoIcon className='fill-amber-500 text-white w-6 h-6' />
                                <S>{t("Medium Priority")}</S>
                            </div>
                            <S className='bg-green-600 py-2 px-4 text-white rounded-full'>{t("Finished")}</S>
                        </div>

                    </div>
                </CustomCard>
                <MapSVG className="bg-primary/10 w-14 h-14 p-3 rounded-full text-primary  animate-float absolute left-[25%] top-[-22%] hover:text-white hover:bg-primary transition-colors" />
                <FuelSVG className="bg-primary/10 w-14 h-14 p-3 rounded-full text-primary animate-float2 absolute left-[11%] top-[-18%] hover:text-white hover:bg-primary transition-colors" />
                <SpeedMeterSVG className="bg-primary/10 w-14 h-14 p-3 rounded-full text-primary animate-float absolute left-[0%] top-[-2%] hover:text-white hover:bg-primary transition-colors" />
                
                <div className='bottom-[15%] absolute rounded-md left-[35%] flex items-center gap-2 p-[6px] px-3 bg-[#e7f3fd] w-fit'>
                    <Link className=' text-primary w-5 h-5 ' />
                    <S className='text-primary'>{t("Connected vehicle")}</S>
                </div>
            </div>
        </div>
    )
}

export default OEMHeroGraphics