import { Car7Image, Car8Image, } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H4, H6, S } from '@/components/ui/typography'
import {CheckCircle, Repeat } from 'lucide-react'
import { useTranslations } from 'next-intl'

import React from 'react'

const WorkflowHeroGraphics = () => {
    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-[470px] h-[400px]'>
                <CustomImage pageTitle={metaTitles?.featuresWorkflowMeta_Title} priority={true} src={Car8Image} alt='telematics' className='w-full h-full object-cover' />
                <CustomCard className='flex flex-col items-center gap-4   absolute  top-[-20px] right-[-100px]  shadow-lg max-w-[400px] p-4 border-none'>
                    <div className='flex items-center gap-4 rounded-md  w-full'>
                        <CheckCircle className=' min-w-16 h-16 text-[#4eb176] bg-green-100 p-3 rounded-full' />
                        <div className='flex items-start flex-col'>
                            <H4 >{t("Issue Resolved")}</H4>
                            <S className='text-muted-foreground font-normal'>{t('The “Flat Tire” issue related to the vehicle has been resolved')}</S>
                        </div>
                    </div>
                </CustomCard>
                <CustomCard className='absolute   bottom-[30px] left-[-100px]   px-6 py-3 w-[400px] border-none shadow-lg '>
                    <div className=' rounded-lg p-2 flex flex-col gap-2'>
                        <div className='flex items-center justify-between '>
                            <H6 className='text-[12px]'>Insp #952</H6>
                            <div className='flex items-center gap-1'>
                                <Repeat className='w-4 h-4 text-gray-400' />
                                <S className='text-gray-400 text-[10px]'>{t("Weekly")} -</S>
                                <S className='text-gray-400 text-[10px]'>16/07/2024</S>
                            </div>
                        </div>
                        <div className='flex items-center justify-between  '>
                            <S className='text-[11px] text-yellow-500'>{t("2 weeks from now")}</S>
                            <S className='text-primary  bg-yellow-500 text-white py-1 px-3 rounded-full'>{t("Due soon")}</S>
                        </div>
                        <div className='flex items-center gap-2 mt-2'>
                            <CustomImage pageTitle={metaTitles?.featuresWorkflowMeta_Title} priority={true} src={Car7Image} className='w-10 h-10 object-contain' alt="vehicle telematics" />
                            <div className='flex flex-col gap-0'>
                                <S className=' text-[11px]'>Peugeot Expert </S>
                                <S className='text-muted-foreground text-[11px]'>A3B1246</S>
                            </div>
                        </div>
                    </div>
                </CustomCard>
            </div>
        </div>
    )
}

export default WorkflowHeroGraphics