"use client";

import Slider from "react-slick";
import { useRef } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import MiniProductCard from "./MiniProductCard";

interface Product {
  image: string;
  category: string;
  title: string;
  price: number;
  oldPrice?: number;
  sale?: boolean;
}

interface ProductSliderColumnsProps {
  trending: Product[];
  topRated: Product[];
  topSelling: Product[];
}

function SliderColumn({
  heading,
  products,
}: {
  heading: React.ReactNode;
  products: Product[];
}) {
  const sliderRef = useRef<Slider | null>(null);

  const settings = {
    dots: false,
    arrows: false,
    infinite: products.length > 3,
    speed: 600,
    slidesToShow: 3,
    slidesToScroll: 1,
    vertical: true,
    verticalSwiping: true,

    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 640,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-700">
          {heading}
        </h2>

        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => sliderRef.current?.slickPrev()}
            className="text-gray-500 hover:text-orange-500 transition"
          >
            <ChevronLeft size={18} />
          </button>

          <button
            type="button"
            onClick={() => sliderRef.current?.slickNext()}
            className="text-gray-500 hover:text-orange-500 transition"
          >
            <ChevronRight size={18} />
          </button>
        </div>
      </div>

      {products.length === 0 ? (
        <div className="rounded-xl border border-gray-200 bg-white p-6 text-sm text-gray-400">
          No products selected.
        </div>
      ) : (
        <Slider ref={sliderRef} {...settings}>
          {products.map((product, index) => (
            <div key={index} className="px-1 py-2">
              <MiniProductCard {...product} />
            </div>
          ))}
        </Slider>
      )}
    </div>
  );
}

export default function ProductSliderColumns({
  trending,
  topRated,
  topSelling,
}: ProductSliderColumnsProps) {
  return (
    <section className="py-10 lg:py-16 px-4 lg:px-0">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-3 gap-3">

          <SliderColumn
            heading={
              <>
                Trending <span className="text-[#5CAF8B]">Items</span>
              </>
            }
            products={trending}
          />

          <SliderColumn
            heading={
              <>
                Top <span className="text-[#5CAF8B]">Rated</span>
              </>
            }
            products={topRated}
          />

          <SliderColumn
            heading={
              <>
                Top <span className="text-[#5CAF8B]">Selling</span>
              </>
            }
            products={topSelling}
          />

        </div>
      </div>
    </section>
  );
}