import { Car8Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6, P } from '@/components/ui/typography'
import { AlertOctagon, Contact, FileSignature } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const DocumentsPresentationGraphics2 = () => {
    const t = useTranslations()
  
    return (
        <div className='w-full flex flex-col justify-center items-center max-md:scale-50 '>
          <div className='relative  w-[470px] h-[400px]'>
                <CustomImage pageTitle={metaTitles?.featuresDocumentsMeta_Title} src={Car8Image} alt='vehicle documents' className='w-full h-full object-cover' />
                <CustomCard className='flex items-center gap-4 w-full  absolute   top-[-50px] right-[-40%] border-none shadow-lg '>
                    <div className='min-w-12 h-12 text-amber-400 bg-amber-100 rounded-full flex justify-center items-center'>
                        <Contact className={"w-8 h-8"} />
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Driver’s License Expired")}</H6>
                        <P>{t("Driver’s license Expired Renewal is required for continued operations")}</P>
                    </div>
                </CustomCard>
                <CustomCard className='flex items-center gap-4 w-full  absolute   top-[110px] right-[-40%] border-none shadow-lg '>
                    <div className='min-w-12 h-12 text-green-400 bg-green-100 rounded-full flex justify-center items-center'>
                        <FileSignature className={"w-8 h-8"} />
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Leasing Contract Renew")}</H6>
                        <P>{t("Your leasing Contract about to end , please renew it")}</P>
                    </div>
                </CustomCard>
                <CustomCard className='flex items-center gap-4 w-full  absolute   top-[270px] right-[-40%] border-none shadow-lg '>
                    <div className='min-w-12 h-12 text-red-500 bg-red-100 rounded-full flex justify-center items-center'>
                    <AlertOctagon className={"w-8 h-8"} />
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Insurance Expired")}</H6>
                        <P>{t("Your vehicle insurance expires on [12/01/2025] Please renew to stay covered")}</P>
                    </div>
                </CustomCard>
            </div>
        </div>

    )
}

export default DocumentsPresentationGraphics2