"use client";

import { useRef } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function ProductCarousel({
  products,
}: {
  products: React.ReactNode[];
}) {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: "left" | "right") => {
    if (scrollRef.current) {
      const scrollAmount = 300;
      scrollRef.current.scrollBy({
        left: direction === "left" ? -scrollAmount : scrollAmount,
        behavior: "smooth",
      });
    }
  };

  return (
    <div className="relative w-full ">
      <div
        ref={scrollRef}
        className="flex overflow-x-auto gap-4 scroll-smooth px-2 no-scrollbar"
      >
        {products.map((product, index) => (
          <div key={index}>{product}</div>
        ))}
      </div>

      <div className="flex mt-5 max-sm:hidden items-center rtl:flex-row-reverse justify-center gap-2 mb-4 px-2">
        <button
          onClick={() => scroll("left")}
          className="p-3 rounded-full max-laptop-xl:p-2 max-Wide-mobile-2xl:p-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-neutral-900"
        >
          <ChevronLeft className="size-7 dark:text-neutral-400 max-laptop-xl:size-5 max-Wide-mobile-2xl:size-4" />
        </button>
        <button
          onClick={() => scroll("right")}
          className="p-3 max-laptop-xl:p-2 max-Wide-mobile-2xl:p-1.5 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-neutral-900"
        >
          <ChevronRight className="size-7 dark:text-neutral-400 max-laptop-xl:size-5 max-Wide-mobile-2xl:size-4" />
        </button>
      </div>
    </div>
  );
}
