import { Box, Typography } from '@mui/material'
import { confidenceHex } from '../../lib/utils'
import { scoreToConfidenceLevel } from '../../lib/ds'
import { ConfidenceBadge } from '../badges/ConfidenceBadge'

interface ConfidenceScoreProps {
  score: number
  showLabel?: boolean
  compact?: boolean
}

export function ConfidenceScore({ score, showLabel = false, compact = false }: ConfidenceScoreProps) {
  const color = confidenceHex(score)
  const pct = `${Math.round(score * 100)}%`

  if (compact) {
    return (
      <Typography
        component="span"
        sx={{ fontSize: '0.875rem', fontWeight: 700, color, fontVariantNumeric: 'tabular-nums' }}
      >
        {pct}
      </Typography>
    )
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 0.5 }}>
      <Typography sx={{ fontSize: '1.25rem', fontWeight: 700, color, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
        {pct}
      </Typography>
      {showLabel && (
        <ConfidenceBadge level={scoreToConfidenceLevel(score)} />
      )}
    </Box>
  )
}
