/**
 * ThinkSchool Public Website — Shared Badge Component
 */
function Badge({
  children,
  variant = "amber",
  className = "",
  icon = null,
}) {
  const variantStyles = {
    amber: "bg-amber-500/10 text-amber-400 border-amber-500/20",
    orange: "bg-orange-500/10 text-orange-400 border-orange-500/20",
    zinc: "bg-zinc-800/80 text-zinc-300 border-zinc-700/50",
    emerald: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
    blue: "bg-blue-500/10 text-blue-400 border-blue-500/20",
  };

  return (
    <span
      className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium tracking-wide uppercase font-body border backdrop-blur-sm ${
        variantStyles[variant] || variantStyles.amber
      } ${className}`}
    >
      {icon && <span className="shrink-0">{icon}</span>}
      <span>{children}</span>
    </span>
  );
}

window.Badge = Badge;