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

interface ManaBarProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number;
  max: number;
  manaType?:
    | "fire"
    | "water"
    | "air"
    | "earth"
    | "light"
    | "dark"
    | "death"
    | "transfer"
    | "metal"
    | "sand"
    | "lightning"
    | "crystal"
    | "stellar"
    | "void";
}

const manaColorMap: 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 ManaBar({
  value,
  max,
  manaType = "fire",
  className,
  ...props
}: ManaBarProps) {
  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
  const barColor = manaColorMap[manaType] || manaColorMap.fire;

  return (
    <div
      data-slot="mana-bar"
      className={cn(
        "h-2 w-full overflow-hidden rounded-full bg-[var(--bg-sunken)]",
        className
      )}
      role="progressbar"
      aria-valuenow={value}
      aria-valuemin={0}
      aria-valuemax={max}
      {...props}
    >
      <div
        className="h-full transition-all duration-300 ease-out"
        style={{
          width: `${percentage}%`,
          backgroundColor: barColor,
        }}
      />
    </div>
  );
}
