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

const GaragesPresentation4 = () => {
    const t = useTranslations()
    const prestations = [
        {
            prestation: "Engine oil change",
            image: Car5Image,
            vehicles: "Peugeot 208",
            date: "02/11/2024",
            client: "Arval Cars",
            amount: 89,
        },
        {
            prestation: "Engine oil change",
            image: Car5Image,
            vehicles: "Peugeot 208",
            date: "02/11/2024",
            client: "Arval Cars",
            amount: 20,
        },

    ]
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-20  rounded-md w-full max-lg:mt-20">
            <div className=" flex flex-col gap-2 max-sm:gap-y-8    min-w-fit relative">
                <CustomImage pageTitle={metaTitles?.solutionsGaragesMeta_Title} src={Laptop2Image } className="max-md:hidden w-[689px]  z-0  animate-float2" alt="garage timeline"/>
                <div className="md:absolute -bottom-14 left-0 shadow-lg rounded-lg  animate-float ">
                    <Table className='text-[12px] max-sm:text-[10px] bg-white rounded-lg' >
                        <TableHeader>
                            <TableRow className="">
                                <TableHead className={"text-foreground"}>{t("Prestation")}</TableHead>
                                <TableHead className={"text-foreground "}>{t("Vehilcle")}</TableHead>
                                <TableHead className={"text-foreground max-sm:hidden"}>{t("Date")}</TableHead>
                                <TableHead className={"text-foreground "}>{t("Client")}</TableHead>
                                <TableHead className={"text-foreground "}>{t("Amount")}</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {prestations.map((prestation, i) => (
                                <TableRow key={i}>
                                    <TableCell className=''>{prestation.prestation}</TableCell>
                                    <TableCell className='text-primary underline flex items-center gap-2'><CustomImage pageTitle={metaTitles?.solutionsGaragesMeta_Title} src={prestation?.image} alt='garage vehicle' className='w-9 h-9 object-contain' />{prestation.vehicles}</TableCell>
                                    <TableCell className='max-sm:hidden '>{prestation.date}</TableCell>
                                    <TableCell className=' text-primary underline'>{prestation.client}</TableCell>
                                    <TableCell className=' '>{prestation.amount}€</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                </div>
            </div>

            <div className="flex flex-col gap-10 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <H3>{t("Intelligent management of your garages")}</H3>
                </div>
                <P>{t("Dadycar Garage optimizes the management of your garage by centralizing payment tracking, intervention planning, resource and invoice management")}</P>
                <P>{t("As a garage partner, respond effectively to the needs of companies for fleet management of their professional vehicles, while improving the performance and profitability of your garage")}</P>
                <Button className="w-fit">{t("Try now")}</Button>
            </div>
        </section>
    );
};

export default GaragesPresentation4;