import { useNavigate } from 'react-router';

import Container from '@material-hu/mui/Container';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import StateCard from '@material-hu/components/design-system/StateCard';

import { withHuGoTheme } from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { serviceManagementRoutes } from '../routes';

const UnauthorizedServiceCatalog = () => {
  const { t } = useLokaliseTranslation('service_management');
  const navigate = useNavigate();

  const handleClose = () => navigate(serviceManagementRoutes.servicePortal());
  return (
    <Stack
      sx={{
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        minHeight: '100vh',
      }}
    >
      <TaskFocusHeader
        title={t('service_catalog')}
        onClose={handleClose}
      />
      <Divider />
      <Container
        maxWidth="md"
        sx={{ pt: 6 }}
      >
        <StateCard
          title={t('unauthorized_service_catalog_title')}
          description={t('unauthorized_service_catalog_description')}
          slotProps={{
            card: {
              sx: {
                border: 'none',
              },
            },
          }}
        />
      </Container>
    </Stack>
  );
};

export default withHuGoTheme(UnauthorizedServiceCatalog);
