import { AbarthSVG, AlfaSVG, AudiSVG, BMWSVG, CitroënSVG, DaciaSVG, DodgeSVG, DSSVG, FiatSVG, FordSVG, KiaSVG, LanciaSVG, LexusSVG, MaseratiSVG, MercedesSVG, MiniSVG, OpelSVG, PeugeotSVG, RamSVG, RenaultSVG, SkodaSVG, TeslaSVG, ToyotaSVG } from '@/assets/svg'
import { H4 } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const OEMSupportedBrands = () => {
    const brands = [
        {
            title: "AbarthSVG",
            image: <AbarthSVG />
        },
        {
            title: "AlfaSVG",
            image: <AlfaSVG />
        },
        {
            title: "AudiSVG",
            image: <AudiSVG />
        },
        {
            title: "BMWSVG",
            image: <BMWSVG />
        },
        // {
        //     title: "ChryslerSVG",
        //     image: <ChryslerSVG/>
        // },
        {
            title: "CitroënSVG",
            image: <CitroënSVG />
        },
        {
            title: "DSSVG",
            image: <DSSVG />
        },
        {
            title: "DaciaSVG",
            image: <DaciaSVG />
        },
        {
            title: "DodgeSVG",
            image: <DodgeSVG />
        },
        {
            title: "FiatSVG",
            image: <FiatSVG />
        },
        {
            title: "FordSVG",
            image: <FordSVG />
        },
        // {
        //     title: "JeepSVG",
        //     image: <JeepSVG/>
        // },
        {
            title: "KiaSVG",
            image: <KiaSVG />
        },
        {
            title: "LanciaSVG",
            image: <LanciaSVG />
        },
        {
            title: "LexusSVG",
            image: <LexusSVG />
        },
        {
            title: "MaseratiSVG",
            image: <MaseratiSVG />
        },
        {
            title: "MercedesSVG",
            image: <MercedesSVG />
        },
        {
            title: "MiniSVG",
            image: <MiniSVG />
        },
        {
            title: "OpelSVG",
            image: <OpelSVG />
        },
        {
            title: "PeugeotSVG",
            image: <PeugeotSVG />
        },
        {
            title: "RamSVG",
            image: <RamSVG />
        },
        {
            title: "RenaultSVG",
            image: <RenaultSVG />
        },
        {
            title: "SkodaSVG",
            image: <SkodaSVG />
        },
        {
            title: "TeslaSVG",
            image: <TeslaSVG />
        },
        {
            title: "ToyotaSVG",
            image: <ToyotaSVG />
        },
        // {
        //     title: "VauxhallSVGSVG",
        //     image: <VauxhallSVGSVG/>
        // },
    ]
    const t = useTranslations()
    return (
        <section className='py-10'>
            <H4 className='text-center  pb-10'>{t("Supported by thses brands")}</H4>
            <div className='flex overflow-hidden space-x-16 group'>
            <ul className='flex items-center space-x-16 animate-marquee  group-hover:paused py-10'>
                {brands?.map((brand,i)=> (
                    <li key={i} className="flex items-center justify-center w-16 h-16 hover:saturate-100 saturate-[0.1] hover:scale-105 duration-500 ">
                     {brand.image}
                   </li>
                ))}
            </ul>
            <ul className='flex items-center space-x-16 animate-marquee group-hover:paused ' aria-hidden="true">
                {brands?.map((brand,i)=> (
                    <li key={i} className="flex items-center justify-center w-16 h-16 hover:saturate-100 saturate-[0.1] hover:scale-105 duration-500 ">
                     {brand.image}
                   </li>
                ))}
            </ul>
                </div>
        </section>
    )
}

export default OEMSupportedBrands