"use client"
import { DriverComportment } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6 } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const DriverComportmentCard = () => {
    const t = useTranslations()
    return (
        <div className='w-full'>
            <CustomCard className='lg:w-[288px] h-[234px] border-none shadow-lg p-4'>
                <div className="w-full h-full pr-20">
                    <CustomImage
                        pageTitle={metaTitles?.solutionsGeolocalisationMeta_Title}
                        loading="eager"
                        src={DriverComportment}
                        alt="vehicle-trip"
                        className="w-full h-full object-contain"
                    />
                </div>
            </CustomCard>
            <H6 className='mt-5 text-nowrap'>{t("Driving behavior")}</H6>
        </div>
    )
}

export default DriverComportmentCard