"use client";
import React from "react";
import { CategoryCard } from "./CategoryCard";
import { CategoryGridSkeleton } from "./LoadingSkeleton";
import type { MarketplaceCategory } from "@/types/marketplace";

interface CategoryGridProps {
  categories: MarketplaceCategory[];
  activeSlug?: string;
  loading?: boolean;
  onSelect?: (category: MarketplaceCategory) => void;
  variant?: "grid" | "chip";
}

export function CategoryGrid({
  categories,
  activeSlug,
  loading = false,
  onSelect,
  variant = "grid",
}: CategoryGridProps) {
  if (loading) {
    return variant === "grid" ? <CategoryGridSkeleton /> : null;
  }

  if (variant === "chip") {
    return (
      <div className="flex items-center gap-2 overflow-x-auto no-scrollbar pb-1">
        {categories.map((cat) => (
          <CategoryCard
            key={cat.id}
            category={cat}
            active={activeSlug === cat.slug}
            onClick={() => onSelect?.(cat)}
            variant="chip"
          />
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-4 sm:grid-cols-6 lg:grid-cols-8 gap-3">
      {categories.map((cat) => (
        <CategoryCard
          key={cat.id}
          category={cat}
          active={activeSlug === cat.slug}
          onClick={() => onSelect?.(cat)}
          variant="grid"
        />
      ))}
    </div>
  );
}