import { AntaiSVG, DadyCarSVG, ProfileSVG, StartEndArrow } from '@/assets/svg'
import { CustomCard } from '@/components/ui/cards'
import { S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const SinistresPresentationGraphics = () => {
    const t = useTranslations()

    return (
        <div className='flex items-center gap-1 max-sm:scale-50 max-xl:scale-90'>
            <CustomCard className=' w-[120px] border-none shadow-lg'>
                <AntaiSVG />
            </CustomCard>
            <div className='relative'>
                <StartEndArrow />
                <StartEndArrow className="scale-[-1]" />
                <S className='text-muted-foreground font-normal absolute max-xl:!text-[10px] !text-[12px] top-7 '>{t("When ANTAI records an infraction, it is transmitted to your account")}</S>
            </div>
            <div className='  w-[70px] h-[70px] bg-primary rounded-lg flex justify-center items-center shadow-lg'>
                <DadyCarSVG className={"text-lightBackground"} />
            </div>
            <div className='relative'>
                <StartEndArrow />
                <S className='text-muted-foreground font-normal absolute !text-[12px] -top-7 text-center w-[150px]'>{t("You Design the driver")}</S>
            </div>
            <CustomCard className='flex items-center flex-col border-none shadow-lg'>
                <ProfileSVG className="w-8 h-8 text-primary" />
                <S>{t("Driver")}</S>
            </CustomCard>
        </div>

    )
}

export default SinistresPresentationGraphics