Badge

"use client"

import React from "react";
import type { LucideIcon } from "lucide-react";

export type BadgeVariant = "default" | "success" | "warning" | "destructive" | "info";
export type BadgeSize = "sm" | "md" | "lg";

export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
  /** Text rendered inside the badge */
  label?: string;
  /** Visual style of the badge */
  variant?: BadgeVariant;
  /** Size of the badge */
  size?: BadgeSize;
  /** Shows a small leading status dot */
  dot?: boolean;
  /** lucide-react icon component rendered before the label */
  icon?: LucideIcon | null;
  /** Solid fill instead of the default soft tinted background */
  solid?: boolean;
  /** Fully rounded pill instead of a soft rectangle */
  pill?: boolean;
  /** Extra classes for consumers using a utility CSS framework */
  className?: string;
}

const variantStyles: Record<BadgeVariant, { soft: string; text: string; solid: string; dot: string }> = {
  default: { soft: "#f4f4f5", text: "#3f3f46", solid: "#3f3f46", dot: "#71717a" },
  success: { soft: "#dcfce7", text: "#15803d", solid: "#16a34a", dot: "#22c55e" },
  warning: { soft: "#fef3c7", text: "#b45309", solid: "#d97706", dot: "#f59e0b" },
  destructive: { soft: "#fee2e2", text: "#b91c1c", solid: "#dc2626", dot: "#ef4444" },
  info: { soft: "#e0f2fe", text: "#0369a1", solid: "#0284c7", dot: "#0ea5e9" },
};

const sizeStyles: Record<BadgeSize, { padding: string; fontSize: number; gap: number; icon: number; dot: number }> = {
  sm: { padding: "2px 8px", fontSize: 11, gap: 4, icon: 11, dot: 5 },
  md: { padding: "3px 10px", fontSize: 12, gap: 5, icon: 13, dot: 6 },
  lg: { padding: "5px 12px", fontSize: 14, gap: 6, icon: 15, dot: 7 },
};

/**
 * Badge — a compact label for statuses, categories, and counts.
 * Soft tinted by default, `solid` for higher contrast. Renders
 * standalone with zero props.
 */
export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      label = "Badge",
      variant = "default",
      size = "md",
      dot = false,
      icon: Icon = null,
      solid = false,
      pill = true,
      className = "",
      style,
      ...rest
    },
    ref
  ) => {
    const colors = variantStyles[variant];
    const { padding, fontSize, gap, icon: iconSize, dot: dotSize } = sizeStyles[size];

    return (
      <span
        ref={ref}
        className={className}
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap,
          padding,
          fontSize,
          fontWeight: 500,
          fontFamily: "inherit",
          lineHeight: 1.4,
          whiteSpace: "nowrap",
          borderRadius: pill ? "9999px" : "6px",
          background: solid ? colors.solid : colors.soft,
          color: solid ? "#ffffff" : colors.text,
          border: solid ? "1px solid transparent" : "1px solid rgba(0,0,0,0.04)",
          ...style,
        }}
        {...rest}
      >
        {dot && (
          <span
            aria-hidden="true"
            style={{
              width: dotSize,
              height: dotSize,
              borderRadius: "9999px",
              background: solid ? "rgba(255,255,255,0.85)" : colors.dot,
              flexShrink: 0,
            }}
          />
        )}
        {Icon && <Icon size={iconSize} strokeWidth={2.25} style={{ flexShrink: 0 }} />}
        {label}
      </span>
    );
  }
);

Badge.displayName = "Badge";

export default Badge;