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

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

export const StatusPill = forwardRef<HTMLSpanElement, StatusPillProps>(
  ({ label, variant = "neutral", size = "md", icon, className, ...rest }, ref) => {
    const tone =
      variant === "success"
        ? "bg-green-50 text-green-700 ring-green-600/20"
        : variant === "warning"
          ? "bg-amber-50 text-amber-700 ring-amber-600/20"
          : variant === "info"
            ? "bg-blue-50 text-blue-700 ring-blue-600/20"
            : variant === "error"
              ? "bg-red-50 text-red-700 ring-red-600/20"
              : "bg-gray-50 text-gray-700 ring-gray-400/30";

    const sizing =
      size === "sm"
        ? "px-2 py-0.5 text-xs"
        : size === "lg"
          ? "px-4 py-1.5 text-sm"
          : "px-3 py-1 text-xs";

    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";
