arjmand-pharmacy/components/home/ProductCarousel.tsx

"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[];
  accent?: "default" | "sale";
};

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

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

  return (
    <section id={id} className="pt-10">
      <Container>
        <div
          className={`rounded-2xl p-4 sm:p-5 ${accent === "sale" ? "bg-[#fff1f4]" : "bg-transparent"}`}
        >
          <div className="mb-4 flex items-center justify-between gap-3">
            <div>
              <h2 className={`text-[18px] font-bold ${accent === "sale" ? "text-sale" : "text-navy"}`}>
                {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-9 place-items-center rounded-full border border-line bg-white text-navy"
                aria-label="قبلی"
              >
                <ChevronRight className="size-4" />
              </button>
              <button
                type="button"
                onClick={() => scrollBy(1)}
                className="grid size-9 place-items-center rounded-full border border-line bg-white text-navy"
                aria-label="بعدی"
              >
                <ChevronLeft className="size-4" />
              </button>
              <Link href={href} className="hidden text-[13px] text-primary sm:block">
                مشاهده همه
              </Link>
            </div>
          </div>
          <div
            ref={scroller}
            className="no-scrollbar flex snap-x snap-mandatory gap-3 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>
        </div>
      </Container>
    </section>
  );
}