import { type FC } from 'react';

import { IconAlertTriangle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

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

const ConversationsMaintenancePanel: FC = () => {
  const { t } = useLokaliseTranslation(['chat']);
  const theme = useTheme();

  return (
    <Stack
      alignItems="center"
      justifyContent="center"
      sx={{
        flex: 1,
        width: '100%',
        minHeight: 0,
        px: 3,
        py: 4,
        background: tTheme => tTheme.palette.new.background.layout.default,
      }}
    >
      <HuCardContainer
        sx={{
          maxWidth: '1000px',
          width: '100%',
          boxShadow: 'none',
          border: 1,
          borderColor: theme.palette.new.border.neutral.default,
          borderRadius: 2,
          backgroundColor: theme.palette.new.background.elements.default,
        }}
      >
        <Stack
          alignItems="center"
          sx={{ textAlign: 'center' }}
          spacing={1}
        >
          <HuAvatar
            Icon={IconAlertTriangle}
            color="warning"
            size="large"
          />
          <Stack>
            <Typography
              component="h5"
              fontWeight="fontWeightSemiBold"
              variant="globalM"
              sx={{
                color: theme.palette.new.text.neutral.default,
              }}
            >
              {t('chat:chat_maintenance.title')}
            </Typography>
            <Typography
              variant="globalXS"
              sx={{
                color: theme.palette.new.text.neutral.lighter,
              }}
            >
              {t('chat:chat_maintenance.description')}
            </Typography>
          </Stack>
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};

export default ConversationsMaintenancePanel;