import { DashedArrowSVG, LinkSVG,  PredictiveAnalysisImage, ResponsiveSVG, RobotSVG, WifiSVG } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const PredictiveMaintenanceHeroGraphics = () => {
    const t = useTranslations("")
    return (
        <div className=' flex flex-col justify-center items-center  max-lg:mt-8 gap-4  '>
            <div className='flex items-center relative max-lg:scale-[0.7]  '>
                <div className='w-[66px] h-[66px] bg-[#E7F3FD] rounded-lg flex items-center justify-center'>
                    <RobotSVG />
                </div>
                <DashedArrowSVG />
                <LinkSVG className="absolute w-7 h-7 left-[133px] text-primary" />
                <CustomCard className='shadow-lg shadow-black/5 border-none flex items-center gap-2'>
                    <div className='w-[66px] h-[66px] bg-[#E7F3FD] rounded-lg flex items-center justify-center p-4 text-primary'>
                        <ResponsiveSVG />
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S>{t("Dadycar Fleet")}</S>
                        <S className='text-gray-500 text-sm'>{t("Reveive infos & present")}</S>
                    </div>
                </CustomCard>
            </div>
            <div className=' lg:mr-52 '>
                            <WifiSVG />
            </div>
            <div className='relative w-[705px] h-[317px] max-lg:scale-[0.7] max-sm:scale-[0.5]'>
                <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} priority={true} src={PredictiveAnalysisImage} alt='fuel cards vehicle' className='w-full object-contain' />
            </div>
        </div>
    )
}

export default PredictiveMaintenanceHeroGraphics