import { FleetSVG, LeftBottomToRightTop, LeftToRight, LeftToRightDashed, Logo2, RightToLeftDashed, TopToBottomDashed, VehicleSVG } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const OperationGraph = () => {
    const t = useTranslations()
    return (
        <>
            {/* Dekstop */}
            <div className=' relative h-[300px] w-[600px] lg:w-[735px] mb-40 mx-auto max-sm:scale-[0.5] max-lg:scale-75  max-sm:-translate-x-40'>
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={LeftToRight} className='absolute top-[18%] left-[11.5%] lg:left-[8.8%] h-[20px] w-[230px] lg:w-[297px]' alt='partners integration' />
                {/* Fleet */}
                <div className='absolute flex flex-col items-center gap-4 top-[12%] left-[-1%] '>
                    <CustomCard className="rounded-md shadow-lg px-4 h-[71px]  w-[71px] flex flex-col items-center">
                        <FleetSVG className=" text-primary w-8 h-8" />
                        <S className='w-20 text-center text-nowrap '>{t("Fleet")}</S>
                    </CustomCard>
                </div>
                <S className='max-lg:text-[10px] text-gray-500 absolute top-[2%] max-w-[260px] left-[13%] font-normal'>{t("Easily find the perfect garage for your needs with Dadycar")}</S>
                <S className='max-lg:text-[10px] text-gray-500 absolute top-[2%] left-[62%] font-normal '>{t("Send a request to your chosen garage with just one click")}</S>
                <S className='max-lg:text-[10px] text-gray-500 absolute top-[33%] left-[62%] font-normal '>{t("Approves your request and prepares for the service")}</S>
                <S className='max-lg:text-[10px] text-gray-500 absolute -bottom-[25%] left-[40%] font-normal'>{t("Send the vehicle hassle-free, with peace of mind")}</S>

                {/* Admin */}
                <div className='absolute flex flex-col items-center gap-4 top-[12%] left-[49%] z-10 '>
                    <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={Logo2} alt='admin partner' className='w-[71px] h-[71px]' />
                </div>
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={LeftToRightDashed} className='absolute top-[17%] left-[61.5%] lg:left-[58.8%] h-[20px] w-[238px] lg:w-[327px]' alt='partners integration' />
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={RightToLeftDashed} className='absolute top-[25%] left-[61%] lg:left-[58.7%] h-[20px] w-[235px] lg:w-[327px]' alt='partners integration' />

                {/* Assignment Form */}
                <div className='absolute flex flex-col items-center gap-4 top-[12%] -right-[13%] z-10 '>
                    <CustomCard className="rounded-md shadow-lg px-4 h-[71px]  w-[71px] flex flex-col items-center">
                        <FleetSVG className=" text-primary w-8 h-8 " />
                        <S className='w-20 text-center text-nowrap '>{t("Garage")}</S>
                    </CustomCard>
                </div>

                <div className='absolute flex flex-col items-center gap-4 top-[99%] left-[-1%] '>
                    <CustomCard className="rounded-md shadow-lg px-4 h-[71px]  w-[71px] flex flex-col items-center">
                        <VehicleSVG className=" text-primary w-8 h-8 " />
                        <S className='w-20 text-center text-nowrap '>{t("Vehicle")}</S>
                    </CustomCard>
                </div>
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={TopToBottomDashed} className='absolute top-[35.5%] left-[3%] h-[190px] w-[15px]' alt='partners integration' />
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={LeftBottomToRightTop} className='absolute top-[36%] left-[11.5%] lg:left-[9%] h-[235px] w-[580px] lg:w-full' alt='partners integration' />

            </div>

        </>
    )
}

export default OperationGraph