import { AvatarImage, Car1Image, DollarSvg, FuelSVG, LocationSVG, LockSVG, PointerSVG, ProfileSVG, UnlockSVG } from "@/assets/svg"
import { metaTitles } from "@/components/metaData/metaTitles"
import { CustomCard } from "@/components/ui/cards"
import { CustomLine } from '@/components/ui/lines'
import CustomImage from "@/components/ui/miscellaneous/CustomImage"
import { S } from "@/components/ui/typography"
import { useTranslations } from "next-intl"

const FeaturesHeroGraphics = () => {
    const t = useTranslations()
    return (
        <div className="flex  items-center max-sm:justify-between justify-center xl:justify-end max-sm:scale-[0.7] ">
            <div className="grid grid-cols-1 gap-6 bg-background w-fit sm:p-4 2xl:p-10 rounded-lg max-sm:-translate-x-24">
                <CustomCard className="w-48 xl:w-56">
                    <div className="flex flex-col item  gap-3">
                        <div className="flex items-center gap-3"><ProfileSVG  className={"text-primary w-5 h-5"} /> <S className="text-[12px]">{t("Driver")}</S></div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4"><CustomImage pageTitle={metaTitles?.featuresHomeMeta_Title} src={AvatarImage} alt="driver" className="w-7 h-7" priority={true}  /> <S>Paul Garnier</S></div>
                            <S className="text-green-500">85%</S>
                        </div>
                    </div>
                </CustomCard>
                <CustomCard className="w-48 xl:w-56">
                    <div className="flex flex-col item  gap-3">
                        <div className="flex items-center gap-3"><FuelSVG className={"text-primary w-5 h-5"} /> <S className="text-[12px]">{t("Fuel Consumption")}</S></div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4"><S>247 L</S></div>
                            <S className="text-primary">~ 540 €</S>
                        </div>
                    </div>
                </CustomCard>
                <CustomCard className="w-48 xl:w-56">
                    <div className="flex flex-col item  gap-3">
                        <div className="flex items-center gap-3"><PointerSVG className={"text-primary w-5 h-5"} /> <S className="text-[12px]">{t("Millage")}</S></div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4"><S>1450.25  Km</S></div>
                            <S className="text-green-500">+580 Km</S>
                        </div>
                    </div>
                </CustomCard>
                <CustomCard className="w-48 xl:w-56">
                    <div className="flex flex-col item  gap-3">
                        <div className="flex items-center gap-4"><DollarSvg className={"text-primary w-5 h-5"} /> <S className="text-[12px]">{t("Cost €/Km")}</S></div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4"><S>14€/km</S></div>
                            <S className="text-green-500">- 2.3€</S>
                        </div>
                    </div>
                </CustomCard>
            </div>
            
            {/*  Car */}
            <div className={"relative  max-sm:mt-20 max-sm:translate-x-[75px]"}>
                <CustomImage pageTitle={metaTitles?.featuresHomeMeta_Title} src={Car1Image} alt="lock unlock" className="min-w-[400px] w-[500px]" priority={true} />
                <div className="absolute bottom-[50%] right-[10%] flex flex-col items-center gap-2 ">
                    <S>{t("Lock & Unlock")}</S>
                    {/* Locks */}
                    <div>
                        <div className="flex items-center justify-center gap-1 bg-lightBackground shadow-sm p-1 rounded-sm">
                            <div className="w-12 h-10 rounded-sm bg-primary flex items-center justify-center">
                                <UnlockSVG />
                            </div>
                            <div className="w-12 h-10 rounded-sm flex items-center justify-center">
                                <LockSVG />
                            </div>
                        </div>
                    </div>
                    <CustomLine endIcon={<LocationSVG className={"text-primary"} />} height="173px" width="50px" points={[{ x: 25, y: 0 }, { x: 25, y: 160 }]} />
                    {/* damage */}
                </div>
                <div className="absolute bottom-[-10%] left-[50%] flex flex-col items-center ">
                    <CustomLine endIcon={<LocationSVG className={"text-primary"} />} height="200px" width="50px" points={[{ x: 25, y: 200 }, { x: 25, y: 80 }]} />
                    <S className="p-2 h-10 rounded-3xl bg-primary flex items-center justify-center text-primary-foreground px-3">{t("New damage")}</S>
                </div>
            </div>
        </div>
    )
}

export default FeaturesHeroGraphics