import { Car5Image, } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex flex-col gap-3'>
                <CustomCard className='flex items-center gap-4 w-full'>
                    <CustomImage pageTitle={metaTitles?.featuresOrderMobilesMeta_Title} src={Car5Image} className='w-16 h-16 object-contain' alt='order vehicle' />
                    <div className='flex flex-col gap-4 w-full'>
                        <div className='flex items-center justify-between gap-4'>
                            <div className='flex flex-col gap-0'>
                                <H6 className='max-sm:text-sm'>Peugeot 208</H6>
                                <S className='text-muted-foreground font-normal !text-[12px]'>A3B1246</S>
                            </div>
                            <S className='bg-green-500 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px] !text-[12px]'>Active</S>
                        </div>
                        <div className='flex items-center justify-between max-sm:!text-[10px]  gap-10'>
                            <div className='flex flex-col '>
                                <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Driver")}</S>
                                <S className='max-sm:!text-[10px] text-primary'>Francois leBoix</S>
                            </div>
                            <div className='flex flex-col '>
                                <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Odometer")}</S>
                                <S className=' max-sm:!text-[10px]'>132,00 km</S>
                            </div>
                            <div className='flex flex-col '>
                                <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Fuel")}</S>
                                <S className='text-primary max-sm:!text-[10px] flex items-center gap-1'>{"72%"} <S className='!text-[11px] !font-normal text-foreground'>382Km</S></S>
                            </div>
                        </div>
                    </div>
                </CustomCard>
            </div>

            <CustomCard className='w-full p-6'>
                <div className='flex items-center justify-between'>
                    <S>{t("Order Details")}</S>
                    <S className='bg-yellow-500 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px] !font-normal'>{t("Upcoming")}</S>
                </div>
                <div className='flex flex-col gap-4 mt-6 '>
                    <div className='flex items-center justify-between'>
                        <S className='text-muted-foreground !font-normal'>{t("Date")}</S>
                        <S className='text-muted-foreground !font-normal'>13/03/2022</S>
                    </div>
                    <div className='flex items-center justify-between'>
                        <S className='text-muted-foreground !font-normal'>{t("Rest time")}</S>
                        <S className='text-muted-foreground !font-normal'>2 weeks from now</S>
                    </div>
                    <div className='flex items-center justify-between'>
                        <S className='text-muted-foreground !font-normal'>{t("Garage")}</S>
                        <S className='text-primary !font-normal'>Garage Paris Biton</S>
                    </div>
                    <div className='flex items-center justify-between'>
                        <S className='text-muted-foreground !font-normal'>{t("Odometer")}</S>
                        <S className='text-muted-foreground !font-normal'>1230KM</S>
                    </div>
                </div>
            </CustomCard>
        </div>

    )
}

export default OrderMobilesPresentationGraphics