import { Helmet } from 'react-helmet-async';

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

import HuTitle from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import {
  FilesTable,
  FolderBreadcrumbs,
} from 'src/pages/dashboard/files/components';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const Files = () => {
  const { t } = useLokaliseTranslation('files');
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('FILES'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          height: '100%',
          overflow: 'auto',
        }}
      >
        <Container
          maxWidth="lg"
          sx={{ gap: 3, display: 'flex', flexDirection: 'column', pt: 2 }}
        >
          <HuTitle
            variant="L"
            title={t('FILES')}
          />
          <FolderBreadcrumbs />
          <FilesTable />
        </Container>
      </Stack>
    </HugoThemeProvider>
  );
};

export default Files;
