import { Car5Image, Car6Image, CarRepairSVG } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import { CustomCard } from "@/components/ui/cards";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/tables/CustomTable";
import { H3, P, S, } from "@/components/ui/typography";
import { BellRing } from "lucide-react";
import { useTranslations } from "next-intl";

import React from "react";

const ANTAIPresentation2 = () => {
    const t = useTranslations()
    const services = [
        {
            image: Car5Image,
            vehicle: "Peugeot 208",
            date: "27/12/2024",
            status: "Not Designated",
            statusColor: "hsla(0, 84%, 60%, 1)",
            label: "Excess speed below 80 km/h",
        },
        {
            image: Car6Image,
            vehicle: "Peugeot 208",
            date: "17/12/2024",
            status: "Solved",
            statusColor: "hsla(144, 51%, 51%, 1)",
            label: "Using a phone while driving",
        },
        {
            image: Car6Image,
            vehicle: "Peugeot 208",
            date: "17/12/2024",
            status: "Other Status",
            statusColor: "hsla(38, 91%, 66%, 1)",
            label: "Failure to respect the red traffic light",
        },
        {
            image: Car6Image,
            vehicle: "Peugeot 208",
            date: "10/12/2024",
            status: "Solved",
            statusColor: "hsla(144, 51%, 51%, 1)",
            label: "Using a phone while driving",
        },

    ]
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-10  rounded-md w-full  ">
            <div className=" flex flex-col gap-4 min-w-fit ">
                <div className="shadow-lg rounded-md  ">
                    <Table className='text-[12px] max-sm:text-[10px] bg-white rounded-md'>
                        <TableHeader>
                            <TableRow>
                                <TableHead>{t("Vehicles")}</TableHead>
                                <TableHead className=''>{t("Date")}</TableHead>
                                <TableHead>{t("Status")}</TableHead>
                                <TableHead className='max-sm:hidden' >{t("Offense")}</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {services.map((service, i) => (
                                <TableRow key={i} >
                                    <TableCell className={`${i !== 0 && "blur-[3px] pointer-events-none "} flex items-center gap-2  text-primary underline`} ><CustomImage pageTitle={metaTitles?.integrationsANTAIMeta_Title} src={service.image} className='w-8 h-8 object-contain' alt={service.vehicle} />{service.vehicle}</TableCell>
                                    <TableCell className={`${i !== 0 && "blur-[3px] pointer-events-none"}`} >{service.date}</TableCell>
                                    <TableCell ><div className='rounded-full text-center text-nowrap text-white p-1 max-sm:text-[8px]' style={{ backgroundColor: service.statusColor }}>{t(service.status)}</div></TableCell>
                                    <TableCell className='max-sm:hidden' >{t(service.label)}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
                <div className="flex max-sm:flex-col items-center gap-4">
                    <CustomCard className="flex items-center gap-2">
                        <CarRepairSVG className="bg-primary/10 p-2 rounded-md w-12 h-12 text-primary min-w-fit" />
                        <div className="flex flex-col gap-2">
                            <S>{t("FPS Tracking")}</S>
                            <S className="!font-normal w-60">{t("Send payment requests to employees and track their status")}</S>
                        </div>
                    </CustomCard>
                    <CustomCard className="flex items-center gap-2">
                        <BellRing className="bg-red-100 p-2 rounded-md w-12 h-12 text-destructive min-w-fit" />
                        <div className="flex flex-col gap-2">
                            <S>{t("FPS Tracking")}</S>
                            <S className="!font-normal lg:w-60">{t("Send payment requests to employees and track their status")}</S>
                        </div>
                    </CustomCard>
                </div>
            </div>

            <div className="flex flex-col gap-3 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <H3>{t("Instant management of infractions")}</H3>
                </div>
                <P>{t("The ANTAI integration with Dadycar simplifies the management of fines and tickets for your automobile fleet thanks to automated and efficient tools")}</P>
                <P>{t("Track all violations in real time, quickly designate responsible employees, instantly manage FPS and receive alerts for proactive management Save time, optimize your processes and ensure compliance of your vehicle fleet with ease")}</P>
                <Button className="w-fit mt-4">{t("Request a demo")}</Button>
            </div>
        </section>
    );
};

export default ANTAIPresentation2;