import { gradeColor, gradeBadgeSize } from '@/lib/vyndrTokens';

type Grade = 'A+' | 'A' | 'A-' | 'B+' | 'B' | 'B-' | 'C' | 'D';

type GradeBadgeProps = {
  grade: Grade | string;
  /** Pixel height or a variant: sm 16 (inline) / md 30 / lg 48 (card) / hero 100 (80–120). */
  size?: number | 'sm' | 'md' | 'lg' | 'hero';
  /** A/A+ get a phosphor glow when true. */
  glow?: boolean;
};

/**
 * The grade chip (§5) — the product's core visual. The grade letter is ALWAYS
 * the largest, first-read element on a card; on hero surfaces it's 80–120px.
 * Colored strictly by grade token. JetBrains Mono. Data — never glitches.
 */
export default function GradeBadge({ grade, size = 'md', glow = false }: GradeBadgeProps) {
  const c = gradeColor(grade);
  const px = gradeBadgeSize(size);
  const isA = grade === 'A+' || grade === 'A';
  return (
    <span
      className="mono"
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: px + 6,
        height: px,
        padding: '0 6px',
        fontSize: px * 0.52,
        fontWeight: 800,
        color: c,
        border: `1.5px solid ${c}`,
        borderRadius: 4,
        background: `color-mix(in srgb, ${c} 12%, transparent)`,
        boxShadow: glow && isA ? `0 0 14px color-mix(in srgb, ${c} 55%, transparent)` : 'none',
        letterSpacing: grade.length > 1 ? '-0.02em' : '0',
        lineHeight: 1,
      }}
    >
      {grade}
    </span>
  );
}
