"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import type { CategoryNode } from "@/lib/types";
import SectionHeading from "./ui/SectionHeading";

const PLACEHOLDER_IMAGES = [
  "/images/categories/girls.svg",
  "/images/categories/boys.svg",
  "/images/categories/baby.svg",
  "/images/categories/party.svg",
  "/images/categories/sets.svg",
  "/images/categories/outerwear.svg",
];

export default function Categories({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
  const items = categoryColumns.flatMap((col) => col.children);
  if (items.length === 0) return null;

  return (
    <section className="pt-5 md:pt-7 pb-10 md:pb-14">
      <div className="boxed">
        <SectionHeading kicker="Categories" title="دسته‌بندی محصولات" />

        <div className="bg-gold rounded-2xl md:rounded-3xl py-8 px-4 md:px-8">
          <Swiper
            spaceBetween={10}
            slidesPerView={2}
            breakpoints={{
              768: { slidesPerView: 3 },
              1024: { slidesPerView: 6, spaceBetween: 14 },
              1280: { slidesPerView: 8, spaceBetween: 14 },
            }}
          >
            {items.map((cat, i) => (
              <SwiperSlide key={cat.id}>
                <Link href={`/products?category=${cat.slug}`} className="group block text-center">
                  <div className="overflow-hidden rounded-lg bg-white">
                    <img
                      src={PLACEHOLDER_IMAGES[i % PLACEHOLDER_IMAGES.length]}
                      alt={cat.nameFa}
                      className="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-105"
                    />
                  </div>
                  <span className="mt-2 block text-xs md:text-sm font-bold text-ink">
                    {cat.nameFa}
                  </span>
                </Link>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}