import { AvatarImageNoRounded, MapGarages, SeatImage } 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 { H3, H4, H5, P, S } from "@/components/ui/typography";
import { useTranslations } from "next-intl";
import React from "react";

const PartnersFindGarage = () => {
    const t = useTranslations();

    return (
        <section className="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-20 rounded-md w-full">
            <div className="flex flex-col gap-2 max-sm:gap-y-8  bg-white p-4 w-full rounded-md shadow-lg">
                <div className="p-4">
                    <div className="flex gap-2">
                        <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={AvatarImageNoRounded} className="w-14 h-14 rounded-[8px] object-cover " alt="partners vehicle driver" />
                        <div className="flex flex-col gap-1">
                            <S>Jhon Martin</S>
                            <div className="w-24 h-2 bg-gray-200 rounded-full"></div>
                            <div className="w-16 h-2 bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div className="flex max-sm:flex-col items-start sm:items-center justify-between gap-8 mt-8">
                        <div className="flex gap-2">
                        <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={SeatImage} className="w-[48px] h-[48px] object-cover" alt="partners vehicle" />
                            <div className="flex flex-col">
                                <S>SEAT MARBELLA</S>
                                <S className="text-[#71717A] font-[400]">VG987KL</S>
                            </div>
                        </div>
                        <CustomCard className="flex-1">
                            <H4>{t("Tire")}</H4>
                            <div className="flex items-center gap-x-2  gap-y-2 justify-between flex-wrap">
                                <div>
                                    <H5 className="-mb-2 text-destructive">3.6<S className="text-foreground !text-[11px] font-medium"> 3.05%</S> </H5>
                                    <S className="text-muted-foreground !text-[11px] font-semibold">{t("Front left")}</S>
                                </div>
                                <div>
                                    <H5 className="-mb-2 text-destructive">3.6<S className="text-foreground !text-[11px] font-medium"> 3.05%</S> </H5>
                                    <S className="text-muted-foreground !text-[11px] font-semibold">{t("Front right")}</S>
                                </div>
                                <div>
                                    <H5 className="-mb-2 text-foreground">4</H5>
                                    <S className="text-muted-foreground !text-[11px] font-semibold">{t("Back left")}</S>
                                </div>
                                <div>
                                    <H5 className="-mb-2 text-foreground">4</H5>
                                    <S className="text-muted-foreground !text-[11px] font-semibold">{t("Back right")}</S>
                                </div>
                            </div>
                        </CustomCard>
                    </div>
                </div>
                <div className="min-w-[100%] sm:min-w-[560px] ">
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={MapGarages} alt="garages map" className="w-full object-contain" />
                </div>

            </div>
            <div className="flex flex-col gap-6 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <H3>{t("Find the certified garage that meets your needs")}</H3>
                </div>
                <P>{t("Thanks to our platform, quickly locate a certified garage near you by simply entering your location Each partner garage is carefully selected for its expertise, the quality of its services and the maintenance of your vehicles Choose the one that suits your needs and make an appointment easily online for fast and reliable car fleet management")}</P>
                <Button className="w-fit">{t("Start now")}</Button>
            </div>
        </section>
    );
};

export default PartnersFindGarage;