"use client";

import Marquee from "react-fast-marquee";
import MainLink from "../shared/main-link";
import Image from "next/image";

import "../Achievements/slider/AchievemetsSlider.css";
import React from "react";

function DeveloperSlider({
  reverse,
  locale,
  data,
  delay,
  speed,
}: {
  reverse?: boolean;
  locale: string;
  data: any[];
  delay?: number;
  speed?: number;
}) {
  return (
    <>
      <div dir="ltr">
        <Marquee
          speed={speed ? speed : 1000}
          delay={delay ? delay : 0}
          direction={reverse ? "right" : "left"}
          pauseOnHover
          gradient={false}
          className="py-4"
        >
          {data?.map((item, index) => (
            <div
              key={index}
              className="bg-borderbg rounded-xl mx-2 p-[1px] w-[200px] md:w-[250px] lg:w-[280px] h-[120px] relative"
              
            >
              <MainLink
                locale={locale}
                href={`developers/${item?.slug}`}
                className="text-center !w-full h-full flex items-center justify-center text-2xl rounded-xl !text-white/70 relative"
              >
                <Image
                  src={item?.image?.original_url}
                  alt={item?.name}
                  fill
                  className="!w-[calc(100%-2px)] !h-[calc(100%-2px)] mt-[1px] ms-[1px] rounded-xl object-cover"
                />
                {/* {item?.name} */}
              </MainLink>
            </div>
          ))}
        </Marquee>
      </div>
    </>
  );
}

export default DeveloperSlider;