import { Box, Typography } from '@mui/material'
import { matchScoreHex } from '../../lib/utils'

interface Props {
  score: number
  size?: 'sm' | 'md' | 'lg'
}

const FONT_SIZES: Record<string, string> = { sm: '1.25rem', md: '1.75rem', lg: '2.5rem' }

export function MatchScoreDisplay({ score, size = 'md' }: Props) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.25, flexShrink: 0 }}>
      <Typography sx={{ fontWeight: 800, fontSize: FONT_SIZES[size], color: matchScoreHex(score), lineHeight: 1 }}>
        {score}
      </Typography>
      <Typography variant="caption" color="text.secondary">/100</Typography>
    </Box>
  )
}
