import { type FC } from 'react';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

type DisabledInputProps = {
  isDeleted: boolean;
};

const DisabledInput: FC<DisabledInputProps> = props => {
  const { isDeleted } = props;
  const { t } = useLokaliseTranslation('chat');
  return (
    <Stack
      sx={{
        width: '100%',
        alignItems: 'center',
        backgroundColor: theme => theme.palette.new.background.layout.default,
        pb: 4.5,
        pt: 2.5,
        px: 4.5,
      }}
    >
      <Typography
        variant="globalS"
        sx={{
          textAlign: 'center',
          color: theme => theme.palette.new.text.neutral.lighter,
        }}
      >
        {isDeleted
          ? t('groups.deleted_user_chat')
          : t('groups.disabled_user_chat')}
      </Typography>
    </Stack>
  );
};

export default DisabledInput;