import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "@/shared/utils";

export type StatusPillProps = HTMLAttributes<HTMLSpanElement> & {
  label: string;
  variant?: "success" | "warning" | "info" | "neutral" | "error";
  size?: "sm" | "md" | "lg";
  icon?: ReactNode;
};

const toneStyles: Record<NonNullable<StatusPillProps["variant"]>, string> = {
  success: "bg-success-soft text-success ring-success/25",
  warning: "bg-warning-soft text-foreground ring-warning/25",
  info: "bg-info-soft text-info ring-info/25",
  error: "bg-danger-soft text-danger ring-danger/25",
  neutral: "bg-muted text-muted-foreground ring-border-muted/40",
};

const sizeStyles: Record<NonNullable<StatusPillProps["size"]>, string> = {
  sm: "px-2 py-0.5 text-xs",
  md: "px-3 py-1 text-xs",
  lg: "px-4 py-1.5 text-sm",
};

export const StatusPill = forwardRef<HTMLSpanElement, StatusPillProps>(
  ({ label, variant = "neutral", size = "md", icon, className, ...rest }, ref) => {
    const tone = toneStyles[variant];
    const sizing = sizeStyles[size];

    return (
      <span
        ref={ref}
        className={cn(
          "inline-flex items-center rounded-full ring-1 ring-inset gap-1",
          sizing,
          tone,
          className
        )}
        {...rest}
      >
        {icon ? <span className="flex items-center justify-center">{icon}</span> : null}
        <span>{label}</span>
      </span>
    );
  }
);

StatusPill.displayName = "StatusPill";
