"use client";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import Image from "next/image";
import { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";

const images = [
  "/images/img2.webp",
  "/images/img3.jpg",
  "/images/img6.jpg",
  "/images/img11.jpeg",
  "/images/img12.png",
];

export default function HomeMarquee() {
  const [marqImg, setMarqImg] = useState<string[]>(images);
  const { data } = useQuery({
    queryKey: ["gallery"],
    queryFn: () => httpClient(endPoints.gallery),
    select: (data) => {
      const galary = data?.data?.results;
      return galary.map((item: any) => item.image) || [];
    },
  });
  useEffect(() => {
    data && setMarqImg(data);
  }, [data]);
  return (
    <div className="bg-[#1e1d1c] py-5">
      <Marquee>
        {marqImg.map((item) => (
          <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
            <Image
              src={item}
              alt="images"
              fill
              priority
              className="object-cover"
            />
          </div>
        ))}
      </Marquee>
    </div>
  );
}