import { CriticalSVG, SmallMercedesSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { SmallCalendarTimeline } from '@/components/ui/charts'
import { P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const FlotteServicePresentation3Grapics = () => {
    const t = useTranslations()
    const items = [
        {
            carSVG: <SmallMercedesSVG />,
            name: t("Tire replacement required"),
            priotiry: 2,
            priorityText: t("Medium Priority"),
            date: "16/07/2024"
        },
        {
            carSVG: <SmallMercedesSVG />,
            name: t("Engine check required"),
            priotiry: 1,
            priorityText: t("Critical Priority"),
            date: "16/07/2024"
        },
    ]

    return (
        <>
            <SmallCalendarTimeline events={{ titles: ["Hugo Martin", "Jacob Silva"], times: ["09:00am", "10:00am", "11:00am", "12:00am"] }} />
            <CustomCard className='border-none shadow-md lg:w-[570px] mt-4'>
                <div className='flex flex-col gap-2'>
                    {items?.map((item, index) => (
                        <div key={index} className='w-full border-[1px] border-[#E3E3E6] rounded-[8px] flex justify-between flex-wrap gap-4 py-[8px] px-[24px]'>
                            <div className='flex gap-6'>
                                <div>
                                    {item?.carSVG}
                                </div>
                                <div className='flex flex-col max-sm:gap-2'>
                                    <P className='!text-[16px] !font-[600] !text-[#27272A]'>{item?.name}</P>
                                    <div className='flex items-center gap-1 h-full'>
                                        {item?.priotiry === 1 ? (
                                            <div>
                                                <CriticalSVG />
                                            </div>
                                        ) : (
                                            <div className='w-[16px] h-[16px] bg-[#F7BC58] rounded-full' />

                                        )}
                                        <P className='!text-[18px] !text-[#52525B] !font-[500]'>{item?.priorityText}</P>
                                    </div>
                                </div>
                            </div>
                            <div className='flex flex-col'>
                                <P className='!text-[18px] !text-[#A0A0A9] !font-[500]'>{item?.date}</P>
                                <Button className='w-fit max-sm:mx-auto mt-3'>Agissez</Button>
                            </div>
                        </div>
                    ))}
                </div>
            </CustomCard>
        </>
    )
}

export default FlotteServicePresentation3Grapics