import { type Grade, getGradeBg } from "@/lib/scoring";
import { cn } from "@/lib/utils";

const GRADE_STYLES: Record<Grade, string> = {
  A: "bg-perf-good/10 text-perf-good border-perf-good/20",
  B: "bg-perf-good/10 text-perf-good border-perf-good/20",
  C: "bg-perf-warning/10 text-perf-warning border-perf-warning/20",
  D: "bg-perf-warning/10 text-perf-warning border-perf-warning/20",
  E: "bg-perf-danger/10 text-perf-danger border-perf-danger/20",
  F: "bg-perf-danger/10 text-perf-danger border-perf-danger/20",
};

export function GradeBadge({ grade, size = "md" }: { grade: Grade; size?: "sm" | "md" | "lg" }) {
  return (
    <span
      className={cn(
        "inline-flex items-center justify-center rounded border font-bold",
        GRADE_STYLES[grade],
        size === "sm" && "h-6 w-6 text-xs",
        size === "md" && "h-8 w-8 text-sm",
        size === "lg" && "h-10 w-10 text-base",
      )}
    >
      {grade}
    </span>
  );
}