"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import {
  Crown,
  Cpu,
  Gamepad2,
  KeyRound,
  Package,
  Ticket,
  UserRound,
  type LucideIcon,
} from "lucide-react";

const iconMap: Record<string, LucideIcon> = {
  "gamepad-2": Gamepad2,
  ticket: Ticket,
  crown: Crown,
  package: Package,
  "user-round": UserRound,
  cpu: Cpu,
  "key-round": KeyRound,
};

export function CategoryCard({
  name,
  slug,
  description,
  icon,
}: {
  name: string;
  slug: string;
  description?: string | null;
  icon?: string | null;
}) {
  const Icon = (icon && iconMap[icon]) || Package;

  return (
    <motion.div whileHover={{ y: -4 }} transition={{ duration: 0.25 }}>
      <Link
        href={`/category/${slug}`}
        className="block h-full rounded-2xl border border-border bg-gradient-to-b from-surface to-bg p-5 transition hover:border-accent/40"
      >
        <div className="mb-4 inline-flex rounded-xl bg-accent/10 p-3 text-accent">
          <Icon className="h-5 w-5" />
        </div>
        <h3 className="font-[family-name:var(--font-space)] text-lg font-semibold">{name}</h3>
        <p className="mt-2 line-clamp-2 text-sm text-muted">{description}</p>
      </Link>
    </motion.div>
  );
}