import { Car8Image, FuelSVG, RoadSVG } 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 } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const PartnersHeroGraphics = () => {
    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?.integrationsPartnersMeta_Title} priority={true} src={Car8Image} alt='partner' className='w-full object-contain' />
                <CustomCard className='flex flex-col gap-5 absolute  top-[-100px] left-[45%] border-none shadow-lg w-[380px] '>
                    <H6>{t("Orders Open")}</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>
                </CustomCard>
                <CustomCard className='flex flex-col gap-5 absolute  top-[60px] left-[45%] border-none shadow-lg w-[380px] '>
                    <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>
                <RoadSVG className="bg-[#FDE3E3] text-red-500 w-14 h-14 p-1 rounded-full text-primary animate-float2 absolute left-[11%] top-[-14%] hover:text-white hover:bg-red-500 transition-colors" />
                <FuelSVG className="bg-[#FEF5E6] bg-primary/10 w-14 h-14 p-3 rounded-full text-primary animate-float absolute left-[0%] top-0 hover:text-white hover:bg-primary transition-colors " />
            </div>
        </div>
    )
}

export default PartnersHeroGraphics