"use client";

import { useRef } from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Container } from "@/components/Container";
import { ProductCard } from "@/components/ui/ProductCard";
import type { Product } from "@/lib/data";

type Props = {
  id?: string;
  title: string;
  subtitle?: string;
  href?: string;
  products: Product[];
};

export function ProductCarousel({ id, title, subtitle, href = "/products", products }: Props) {
  const scroller = useRef<HTMLDivElement>(null);

  const scrollBy = (dir: number) => {
    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
  };

  if (!products.length) return null;

  return (
    <section id={id} className="py-10">
      <Container>
        <div className="mb-5 flex items-end justify-between gap-3">
          <div>
            <div className="flex items-center gap-3">
              <span className="h-[3px] w-8 bg-brand" />
              <p className="section-kicker">Parts</p>
            </div>
            <h2 className="mt-3 text-[22px] font-extrabold sm:text-[28px]">{title}</h2>
            {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
          </div>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => scrollBy(-1)}
              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
              aria-label="قبلی"
            >
              <ChevronRight className="size-4" />
            </button>
            <button
              type="button"
              onClick={() => scrollBy(1)}
              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
              aria-label="بعدی"
            >
              <ChevronLeft className="size-4" />
            </button>
            <Link href={href} className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
              مشاهده همه
            </Link>
          </div>
        </div>
        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1">
          {products.map((product) => (
            <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
              <ProductCard product={product} />
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}