import { Car13, FuelCard, LocationSVG, SuperSVG } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { CustomLine } from '@/components/ui/lines'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { P, S } from '@/components/ui/typography'
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-lg:scale-[0.7] max-sm:scale-[0.5] max-lg:mt-8  '>
            <div className='relative w-[705px] h-[317px]'>
                <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} priority={true} src={Car13} alt='fuel cards vehicle' className='w-full object-contain' />
                <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} priority={true} src={FuelCard} alt='fuel cards vehicle' className='w-[300px] h-[300px] object-contain absolute top-20 right-10' />
                <CustomCard className='flex flex-col gap-5 absolute -top-[20px] left-[45%] border-none shadow-lg w-[312px] '>
                    <div className='flex flex-col gap-4 pl-3'>
                        <S>{t("Vehicle Expenses")}</S>
                        <div className='flex items-center justify-between flex-wrap gap-x-2 gap-y-2'>
                            <P className='!text-[22px] text-gray-700 font-semibold'>512,00 €</P>
                            <S className='text-gray-400'>{t("Last month")}</S>
                            <S className='text-[#4FB277] font-semibold'>-120 €</S>
                        </div>
                    </div>
                </CustomCard>
                <CustomLine color='#ffffff' height='130px' width='50px' startIcon={<LocationSVG className={"text-white w-2"} />} r={20} points={[{ x: 20, y: 75 }, { x: 20, y: 200 }]} className='absolute bottom-[30px] left-[230px]' />
                <CustomCard className="w-fit border-none shadow-lg absolute bottom-[-15px] left-[150px]">
                    <div className='flex items-center gap-2'>
                        <SuperSVG className="w-6 h-6" />
                        <P className='text-gray-700 font-[500]'>Carte Carburant Active</P>
                    </div>
                </CustomCard>
            </div>
        </div>
    )
}

export default PartnersHeroGraphics