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

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

import { ContentWrapper } from '../components/ContentWrapper';
import { useLibraryWelcomeConfig } from '../hooks/useLibraryWelcomeConfig';

import { LibraryHome } from './components/LibraryHome';
import { LibraryHomeCardSkeleton } from './components/LibraryHomeCardSkeleton';

const Home = () => {
  const { t } = useLokaliseTranslation('libraries');
  const { data: welcomeConfig, isLoading, isError } = useLibraryWelcomeConfig();

  if (isLoading) {
    return (
      <ContentWrapper>
        <LibraryHomeCardSkeleton />
      </ContentWrapper>
    );
  }

  if (isError || !welcomeConfig) {
    return (
      <ContentWrapper>
        <Typography
          color="text.secondary"
          variant="globalM"
        >
          {t('empty')}
        </Typography>
      </ContentWrapper>
    );
  }

  return <LibraryHome config={welcomeConfig} />;
};

export default Home;