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 { H3, P } from '@/components/ui/typography'
import { BadgeCheckIcon } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const GestionParcMaintenance = () => {
    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 (
        <section className="pt-10 px-6 sm:px-0">
            <div className='flex flex-col-reverse lg:flex-row items-center gap-x-16 gap-y-10'>
                <div className='flex-1'>
                    <SmallCalendarTimeline events={{ titles: ["Inspection", "Changement de pneus requis"], 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>
                </div>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] font-[600] !text-gray-800'>{t("From breakdown management to predictive maintenance")}</H3>
                        <P className='!text-gray-600  !text-[16px] mt-4'>{t("Move from reactive and costly maintenance to proactive and cost-effective management with Dadycar")} </P>

                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Instant Reporting")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Does a driver detect a problem? They can report it within 30 seconds via the Dadycar mobile app, with a photo to back it up")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Optimized Resolution Workflow")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("You receive the alert, qualify the problem, assign it to the right garage and follow its resolution in real time")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Predictive Maintenance")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("By analyzing data from our connected devices, our AI anticipates breakdowns before they immobilize your vehicles")}</P>
                        </div>
                        <div className='mt-6'>
                            <Button className="w-fit bg-[#0F82EA] text-[14px] lg:text-[16px]">{t("Request a Demo")}</Button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default GestionParcMaintenance