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

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?:
    | "default"
    | "primary"
    | "secondary"
    | "outline"
    | "success"
    | "warning"
    | "danger"
    | "error"
    | "neutral"
    | "info";
  size?: "sm" | "md";
  dot?: boolean;
}

export const Badge: React.FC<BadgeProps> = ({
  className,
  variant = "default",
  size = "md",
  dot = false,
  children,
  ...props
}) => {
  const normalizedVariant = variant === "error" ? "danger" : variant;

  const variantStyles = {
    default: "bg-brand-blue-light text-brand-blue border-blue-200",
    primary: "bg-brand-blue text-white border-transparent",
    secondary: "bg-slate-100 text-slate-700 border-slate-200",
    outline: "bg-transparent text-slate-700 border-slate-200",
    success: "bg-emerald-50 text-brand-success border-emerald-200",
    warning: "bg-amber-50 text-brand-warning border-amber-200",
    danger: "bg-red-50 text-brand-danger border-red-200",
    neutral: "bg-slate-100 text-brand-secondary border-slate-200",
    info: "bg-sky-50 text-sky-700 border-sky-200",
  };

  const dotColors = {
    default: "bg-brand-blue",
    primary: "bg-white",
    secondary: "bg-slate-500",
    outline: "bg-slate-400",
    success: "bg-brand-success",
    warning: "bg-brand-warning",
    danger: "bg-brand-danger",
    neutral: "bg-brand-secondary",
    info: "bg-sky-500",
  };

  const sizeStyles = {
    sm: "px-2 py-0.5 text-[11px] gap-1.5",
    md: "px-2.5 py-1 text-xs gap-1.5",
  };

  return (
    <span
      className={cn(
        "inline-flex items-center font-medium rounded-full border leading-none select-none",
        variantStyles[normalizedVariant],
        sizeStyles[size],
        className
      )}
      {...props}
    >
      {dot && (
        <span
          className={cn("w-1.5 h-1.5 rounded-full shrink-0", dotColors[normalizedVariant])}
        />
      )}
      {children}
    </span>
  );
};