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

export function FitScore({
  score,
  knockout,
  size = "md",
}: {
  score: number | null;
  knockout?: string | null;
  size?: "sm" | "md" | "lg";
}) {
  if (knockout) {
    return (
      <span
        className={cn(
          "inline-flex items-center rounded-full bg-destructive/15 px-2 py-0.5 font-medium text-destructive",
          size === "sm" ? "text-[10px]" : "text-xs",
        )}
      >
        Knockout
      </span>
    );
  }
  if (score == null) return <span className="text-muted-foreground">—</span>;
  const band = score >= 70 ? "Strong" : score >= 50 ? "Good" : "Moderate";
  const tone = score >= 70 ? "text-success" : score >= 50 ? "text-primary" : "text-muted-foreground";
  return (
    <span className={cn("inline-flex flex-col items-end leading-none", tone)}>
      <span className={cn("inline-flex items-baseline gap-0.5 font-medium tabular")}>
        <span className={size === "lg" ? "text-3xl" : size === "sm" ? "text-sm" : "text-base"}>
          {score}
        </span>
        <span className="text-[10px] text-muted-foreground">/100</span>
      </span>
      {size !== "sm" ? <span className="mt-1 text-[10px] uppercase tracking-wide">{band}</span> : null}
    </span>
  );
}

export function FitBar({ score }: { score: number }) {
  const w = Math.max(2, Math.min(100, score));
  const color = score >= 70 ? "bg-success" : score >= 50 ? "bg-primary" : "bg-muted-foreground/40";
  return (
    <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
      <div className={cn("h-full rounded-full", color)} style={{ width: `${w}%` }} />
    </div>
  );
}