"use client";
import React from "react";
import { useRouter } from "next/navigation";
import type { MarketplaceCategory } from "@/types/marketplace";

interface CategoryCardProps {
  category: MarketplaceCategory;
  active?: boolean;
  onClick?: () => void;
  variant?: "grid" | "chip";
}

export function CategoryCard({
  category,
  active = false,
  onClick,
  variant = "grid",
}: CategoryCardProps) {
  const router = useRouter();

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else {
      router.push(`/marketplace/categories?category=${category.slug}`);
    }
  };

  if (variant === "chip") {
    return (
      <button
        onClick={handleClick}
        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap transition-all"
        style={{
          background: active ? "var(--accent)" : "var(--card)",
          color: active ? "#fff" : "var(--text-primary)",
          border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
        }}
      >
        <span>{category.icon}</span>
        <span>{category.label}</span>
      </button>
    );
  }

  return (
    <button
      onClick={handleClick}
      className="flex flex-col items-center gap-2 p-3 rounded-2xl transition-all hover:scale-105 active:scale-95"
      style={{
        background: active ? "var(--accent)" : "var(--card)",
        border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
      }}
    >
      <span className="text-2xl">{category.icon}</span>
      <span
        className="text-xs font-medium text-center leading-tight"
        style={{ color: active ? "#fff" : "var(--text-primary)" }}
      >
        {category.label}
      </span>
    </button>
  );
}