import * as React from "react";
import { cn } from "@/lib/utils";
import {
  Flame,
  Droplets,
  Wind,
  Mountain,
  Sun,
  Moon,
  Skull,
  Zap,
  Waves,
  CloudLightning,
  Snowflake,
  Sparkles,
  Globe
} from "lucide-react";

interface ElementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  element: string;
  showIcon?: boolean;
  size?: "sm" | "md";
}

const elementIconMap: Record<string, React.ElementType> = {
  fire: Flame,
  water: Droplets,
  air: Wind,
  earth: Mountain,
  light: Sun,
  dark: Moon,
  death: Skull,
  transfer: Zap,
  metal: Waves,
  sand: Globe,
  lightning: CloudLightning,
  crystal: Snowflake,
  stellar: Sparkles,
  void: Moon,
};

const elementColorMap: Record<string, string> = {
  fire: "var(--mana-fire)",
  water: "var(--mana-water)",
  air: "var(--mana-air)",
  earth: "var(--mana-earth)",
  light: "var(--mana-light)",
  dark: "var(--mana-dark)",
  death: "var(--mana-death)",
  transfer: "var(--mana-transfer)",
  metal: "var(--mana-metal)",
  sand: "var(--mana-sand)",
  lightning: "var(--mana-lightning)",
  crystal: "var(--mana-crystal)",
  stellar: "var(--mana-stellar)",
  void: "var(--mana-void)",
};

export function ElementBadge({
  element,
  showIcon = true,
  size = "md",
  className,
  ...props
}: ElementBadgeProps) {
  const Icon = elementIconMap[element] || Globe;
  const color = elementColorMap[element] || "var(--text-primary)";
  const displayName =
    element.charAt(0).toUpperCase() + element.slice(1);

  return (
    <span
      data-slot="element-badge"
      className={cn(
        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-all duration-100",
        size === "sm" && "px-1.5 py-0.5 text-[10px]",
        className
      )}
      style={{
        backgroundColor: `${color}20`,
        borderColor: `${color}60`,
        color: color,
      }}
      {...props}
    >
      {showIcon && <Icon size={size === "sm" ? 10 : 12} />}
      <span>{displayName}</span>
    </span>
  );
}
