import * as React from "react";
import { cn } from "@/lib/utils";

interface StatRowProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string;
  value: React.ReactNode;
  highlight?:
    | "default"
    | "success"
    | "warning"
    | "danger"
    | "fire"
    | "water"
    | "air"
    | "earth"
    | "light"
    | "dark"
    | "death"
    | "transfer"
    | "metal"
    | "sand"
    | "lightning"
    | "crystal"
    | "stellar"
    | "void";
}

const highlightStyles: Record<string, string> = {
  default: "text-[var(--text-primary)]",
  success: "text-[var(--color-success)]",
  warning: "text-[var(--color-warning)]",
  danger: "text-[var(--color-danger)]",
  fire: "text-[var(--mana-fire)]",
  water: "text-[var(--mana-water)]",
  air: "text-[var(--mana-air)]",
  earth: "text-[var(--mana-earth)]",
  light: "text-[var(--mana-light)]",
  dark: "text-[var(--mana-dark)]",
  death: "text-[var(--mana-death)]",
  transfer: "text-[var(--mana-transfer)]",
  metal: "text-[var(--mana-metal)]",
  sand: "text-[var(--mana-sand)]",
  lightning: "text-[var(--mana-lightning)]",
  crystal: "text-[var(--mana-crystal)]",
  stellar: "text-[var(--mana-stellar)]",
  void: "text-[var(--mana-void)]",
};

export function StatRow({
  label,
  value,
  highlight = "default",
  className,
  ...props
}: StatRowProps) {
  return (
    <div
      data-slot="stat-row"
      className={cn(
        "flex items-center justify-between py-1.5 text-sm",
        className
      )}
      {...props}
    >
      <span className="text-[var(--text-secondary)]">{label}</span>
      <span
        className={cn(
          "font-[var(--font-mono)] tabular-nums",
          typeof value === 'string' && highlightStyles[highlight]
        )}
      >
        {value}
      </span>
    </div>
  );
}
