mehraein-front/app/home/components/CategorySection.tsx

"use client";

import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
import useEmblaCarousel from "embla-carousel-react";
import { useEffect, useState } from "react";
import CategoryCard from "./CategoryCard";

const categories = [
  "هدایای تبلیغاتی",
  "کارت ویزیت",
  "بروشور و کاتالوگ",
  "استیکر و لیبل",
  "پاکت و جعبه",
  "سربرگ و اوراق اداری",
  "بنر و فلکس",
  "تقویم و سررسید",
  "چاپ روی پارچه",
  "لوازم نمایشگاهی",
];

const CategorySection = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: "start",
    direction: "rtl",
    slidesToScroll: 5,
    containScroll: "trimSnaps",
  });

  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

  useEffect(() => {
    if (!emblaApi) return;

    const updateButtons = () => {
      setCanScrollPrev(emblaApi.canScrollPrev());
      setCanScrollNext(emblaApi.canScrollNext());
    };

    updateButtons();
    emblaApi.on("select", updateButtons);
    emblaApi.on("reInit", updateButtons);

    return () => {
      emblaApi.off("select", updateButtons);
      emblaApi.off("reInit", updateButtons);
    };
  }, [emblaApi]);

  return (
    <div className="mt-[120px] px-[120px]">
      <div className="flex justify-between items-center">
        <div className="font-bold text-2xl">دسته بندی های محصولات</div>
        <div className="flex gap-2">
          <button
            type="button"
            aria-label="دسته‌بندی‌های قبلی"
            disabled={!canScrollPrev}
            onClick={() => emblaApi?.scrollPrev()}
            className="size-8 bg-primary rounded-full flex justify-center items-center disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
          >
            <ArrowRight size={20} color="white" />
          </button>
          <button
            type="button"
            aria-label="دسته‌بندی‌های بعدی"
            disabled={!canScrollNext}
            onClick={() => emblaApi?.scrollNext()}
            className="size-8 bg-primary rounded-full flex justify-center items-center disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
          >
            <ArrowLeft size={20} color="white" />
          </button>
        </div>
      </div>

      <div className="mt-12 overflow-hidden" ref={emblaRef}>
        <div className="flex touch-pan-y gap-10">
          {categories.map((title) => (
            <div
              key={title}
              className="min-w-0 shrink-0 grow-0 basis-[calc((100%-10rem)/5)]"
            >
              <CategoryCard title={title} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CategorySection;