"use client";

import { HTMLAttributes, ReactNode } from "react";

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  children: ReactNode;
  variant?: "default" | "success" | "warning" | "danger" | "info";
  size?: "sm" | "md";
}

const variantClasses = {
  default: "bg-pixel-gold/20 border-pixel-gold/50 text-pixel-gold",
  success: "bg-green-900/50 border-green-500/50 text-green-400",
  warning: "bg-yellow-900/50 border-yellow-500/50 text-yellow-400",
  danger: "bg-red-900/50 border-red-500/50 text-red-400",
  info: "bg-blue-900/30 border-blue-500/50 text-blue-400",
};

const sizeClasses = {
  sm: "px-2 py-1 text-[10px] sm:text-xs",
  md: "px-3 py-1 text-xs",
};

export default function Badge({
  children,
  variant = "default",
  size = "sm",
  className = "",
  ...props
}: BadgeProps) {
  return (
    <span
      className={`inline-block border uppercase rounded whitespace-nowrap flex-shrink-0 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
      {...props}
    >
      {children}
    </span>
  );
}