'use client'

import { gradeFromScore, gradeMeta } from './primitives.js'

/** Compact color-coded score for the page/post editor toolbar (`77/100` left of "SEO"). */
export function EditorSeoScoreBadge({
  score,
  inverted = false,
}: {
  score: number
  /** When the SEO toggle uses `bg-primary`, render score in primary-foreground. */
  inverted?: boolean
}) {
  const meta = gradeMeta(gradeFromScore(score))
  return (
    <span
      className={`inline-flex items-baseline gap-0.5 text-xs font-medium tabular-nums ${
        inverted ? 'text-primary-foreground' : meta.text
      }`}
      aria-hidden
    >
      {score}
      <span className={inverted ? 'text-primary-foreground/80' : 'opacity-70'}>/100</span>
    </span>
  )
}
