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

interface StockBadgeProps {
  isLoading: boolean;
  isSoldOut: boolean;
  isLowStock: boolean;
  count: number | null;
}

export function StockBadge({ isLoading, isSoldOut, isLowStock, count }: StockBadgeProps) {
  let label = "Checking...";
  if (!isLoading) {
    if (isSoldOut) label = "Sold Out";
    else if (isLowStock) label = `${count} left`;
    else label = "In Stock";
  }

  return (
    <div
      className={cn(
        "absolute top-4 right-4 flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-wider uppercase border z-10",
        isLoading
          ? "bg-elevated border-border text-content-muted animate-pulse"
          : isSoldOut
            ? "bg-elevated border-border text-content-muted"
            : isLowStock
              ? "bg-amber-500/10 border-amber-500/20 text-amber-400"
              : "bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
      )}
    >
      <span
        className={cn(
          "w-1.5 h-1.5 rounded-full",
          isLoading
            ? "bg-content-muted"
            : isSoldOut
              ? "bg-content-subtle"
              : isLowStock
                ? "bg-amber-400"
                : "bg-emerald-400"
        )}
      />
      {label}
    </div>
  );
}