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

import libraryIcon from 'src/assets/svg/library.svg';
import { useAuth } from 'src/contexts/JWTContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useLibrariesTitle } from './hooks/useLibrariesTitle';

export const Libraries = () => {
  const { t } = useLokaliseTranslation('libraries');
  const { instance } = useAuth();
  const { librariesTitle } = useLibrariesTitle();

  return (
    <Stack
      sx={{
        flex: 1,
        mt: 6,
        mx: 15,
      }}
    >
      <Card>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            gap: 2,
          }}
        >
          <Stack
            component="img"
            src={libraryIcon}
            alt="icon"
            sx={{
              width: 160,
              height: 160,
              objectFit: 'contain',
              p: 3,
            }}
          />
          <Stack
            sx={{
              flexDirection: 'column',
              gap: 1,
              p: 1,
            }}
          >
            <Typography
              variant="h5"
              sx={{ display: 'block' }}
            >
              {t('welcome.title', { moduleName: librariesTitle })}
            </Typography>
            <Typography
              color="textSecondary"
              variant="body1"
            >
              {t('welcome.collaborator_description', {
                instanceName: instance?.name,
              })}
            </Typography>
          </Stack>
        </Stack>
      </Card>
    </Stack>
  );
};

export default Libraries;