import { Badge, type BadgeVariant } from '@astryxdesign/core'
import type { JSX } from 'react'

export type Verdict = 'works' | 'broken' | 'missing' | 'unverified'

export interface VerdictBadgeProps {
  verdict: Verdict
}

/** Maps a criterion verdict to the badge variant that carries its color. */
export const verdictBadgeVariant: Record<Verdict, BadgeVariant> = {
  works: 'success',
  broken: 'error',
  missing: 'neutral',
  unverified: 'warning',
}

/** Small uppercase pill for a criterion's pass/fail/missing/unverified verdict. */
export function VerdictBadge({ verdict }: VerdictBadgeProps): JSX.Element {
  return <Badge variant={verdictBadgeVariant[verdict]} label={verdict.toUpperCase()} />
}