import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import Image from 'next/image';
import { clientLogo } from "../data/clientLogo";
import React, { useRef } from 'react'

function OurClients() {
    const splideRef = useRef<any>(null);
  return (
    <Splide
          ref={splideRef}
          aria-label="Client Logos"
          extensions={{ AutoScroll }}
          options={{
            type: "loop",
            perPage: 6,
            perMove: 1,
            gap: ".5rem",
            drag: true,
            direction: "ltr",
            trimSpace: true,
            live: true,
            arrows: false,
            pagination: false,
            autoScroll: {
              speed: 1,
              pauseOnHover: true,
              pauseOnFocus: false,
            },
            breakpoints: {
              1024: {
                perPage: 3,
                perMove: 1,
              },
            },
          }}
        >
          {clientLogo.map((item,i) => (
            <SplideSlide key={i}>
              <Image
                className="mx-auto w-[90px] lg:w-[120px]"
                src={item.image}
                alt={item.name}
                width={126}
                height={90}
              />
            </SplideSlide>
          ))}
        </Splide>
  )
}

export default OurClients