sanihome/src/components/home/FeaturedCategories.tsx

"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode } from "swiper/modules";
import "swiper/css";
import "swiper/css/free-mode";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { EmptyState } from "@/components/ui/EmptyState";
import type { Category, StaticImageWithUrl } from "@/lib/meshkee";

function CategorySlotCard({ image }: { image: StaticImageWithUrl }) {
  const label = image.titleFa ?? image.titleEn ?? "";
  const content = (
    <div className="group flex h-full flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md">
      <div className="mb-3 w-[110px] overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={image.url} alt={label} className="h-full w-full object-contain" />
      </div>
      {label && (
        <span className="w-full truncate text-center text-xs font-medium leading-relaxed md:text-sm">
          {label}
        </span>
      )}
    </div>
  );
  return image.linkUrl ? <a href={image.linkUrl}>{content}</a> : content;
}

export function FeaturedCategories({
  categories,
  images = [],
}: {
  categories: Category[];
  images?: StaticImageWithUrl[];
}) {
  return (
    <section className="py-10 md:py-14">
      <div className="mx-auto max-w-7xl px-4">
        <SectionTitle
          title="دسته‌بندی‌های پرطرفدار"
          enTitle="Featured Categories"
          action="همه دسته‌ها"
        />
        {images.length > 0 ? (
          <Swiper
            modules={[FreeMode]}
            dir="rtl"
            slidesPerView={2.3}
            spaceBetween={12}
            breakpoints={{
              640: { slidesPerView: 4.3, spaceBetween: 12 },
              1024: { slidesPerView: 8, spaceBetween: 12 },
            }}
            freeMode={{ enabled: true, momentum: true, sticky: true }}
            grabCursor
            className="!px-1 !py-2"
          >
            {images.map((image, i) => (
              <SwiperSlide key={image.id}>
                <div className="animate-slide-in h-full" style={{ animationDelay: `${i * 60}ms` }}>
                  <CategorySlotCard image={image} />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        ) : categories.length === 0 ? (
          <EmptyState message="هنوز دسته‌بندی‌ای ثبت نشده است." />
        ) : (
          <Swiper
            modules={[FreeMode]}
            dir="rtl"
            slidesPerView={2.3}
            spaceBetween={12}
            breakpoints={{
              640: { slidesPerView: 4.3, spaceBetween: 12 },
              1024: { slidesPerView: 8, spaceBetween: 12 },
            }}
            freeMode={{ enabled: true, momentum: true, sticky: true }}
            grabCursor
            className="!px-1 !py-2"
          >
            {categories.map((cat, i) => (
              <SwiperSlide key={cat.id}>
                <a
                  href="#"
                  className="animate-slide-in group flex h-full flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md"
                  style={{ animationDelay: `${i * 60}ms` }}
                >
                  <div className="mb-3 w-[110px] overflow-hidden">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={cat.image ?? "/images/placeholder.svg"}
                      alt={cat.name}
                      className="h-full w-full object-contain"
                    />
                  </div>
                  <span className="w-full truncate text-center text-xs font-medium leading-relaxed md:text-sm">
                    {cat.name}
                  </span>
                  {cat.count != null && (
                    <span className="mt-1 text-[11px] text-muted">{cat.count} محصول</span>
                  )}
                </a>
              </SwiperSlide>
            ))}
          </Swiper>
        )}
      </div>
    </section>
  );
}