import { type FC } from 'react';

import Typography from '@material-hu/mui/Typography';

import {
  DIFF_TO_SHOW_WARNING,
  MAX_GROUP_DESCRIPTION_LENGTH,
} from 'src/pages/dashboard/Conversations/constants';

type CharacterCounterProps = {
  content: string;
};

const CharacterCounter: FC<CharacterCounterProps> = ({ content }) => {
  const charactersRemaining = MAX_GROUP_DESCRIPTION_LENGTH - content.length;
  const isAtLimit = charactersRemaining <= 0;
  return (
    <Typography
      variant="globalXXS"
      sx={{
        visibility:
          charactersRemaining > DIFF_TO_SHOW_WARNING ? 'hidden' : 'visible',
        color: theme =>
          isAtLimit
            ? theme.palette.new.text.feedback.error
            : theme.palette.new.text.neutral.disabled,
      }}
    >
      {charactersRemaining}
    </Typography>
  );
};

export default CharacterCounter;