import {Text} from '@/components/ui/typography'
import {useTheme} from '@/sprinkles'

type CharProgressProps = {
  count: number
  max: number
}

export const CharProgress = ({count, max}: CharProgressProps) => {
  const t = useTheme()
  const over = count > max
  return (
    <Text
      style={
        over
          ? {color: t.palette.negative_500}
          : t.atoms.text_contrast_medium
      }
    >
      {max - count}
    </Text>
  )
}
