import { BleuCarSVG, BleuCartSVG,  GeolocalisationAutomobileImage } 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 TrasnportationPresentation5Grapics = () => {
    const t = useTranslations()
   
    return (
        <CustomCard className="w-full !p-0 border-none shadow-lg max-lg:order-1">
        <CustomImage pageTitle={metaTitles?.transportationMeta_Title} src={GeolocalisationAutomobileImage} className='min-w-[100%] xl:w-[528px] object-contain' alt='transport map' />
        <div className='flex items-center gap-4 flex-wrap justify-between px-6 py-3'>
            <div className='flex items-center gap-3'>
                <BleuCarSVG className='w-[32px] h-[32px]' />
                <div className='flex flex-col'>
                    <S className='!text-[12px]'>Citroën C4 Cactus</S>
                    <S className='text-[#71717A] font-400 !text-[12px]'>VD-11-CZ</S>
                </div>
            </div>
            <div className='flex items-center gap-3'>
                <BleuCartSVG className='w-[32px] h-[32px]' />
                <div className='flex flex-col'>
                    <S className='!text-[12px]'>Gustave Mathieu</S>
                    <S className='text-[#71717A] font-400 !text-[12px]'>Driver - Paris, Marseille</S>
                </div>
            </div>
            <div className='flex flex-col'>
                <S className='text-[#71717A] font-400 !text-[12px]'>{t("Exceed time")}:</S>
                <S className='!text-[12px]'>10:40 PM</S>
            </div>
        </div>
    </CustomCard>

    )
}

export default TrasnportationPresentation5Grapics