/**
 * @Move (SQPD)
 * Only used by FormRichEditor - move with it to Forms/
 */
import Typography from '@material-hu/mui/Typography';

export type CharacterCounterProps = {
  current: number;
  max: number;
  overLimit?: boolean;
};

const CharacterCounter = ({
  current,
  max,
  overLimit,
}: CharacterCounterProps) => {
  const exceeded = overLimit ?? current > max;

  return (
    <Typography
      variant="caption"
      component="span"
      sx={{
        color: exceeded ? 'error.main' : 'text.secondary',
        display: 'block',
        mt: 0.5,
      }}
    >
      {current} / {max}
    </Typography>
  );
};

export default CharacterCounter;