import { Box, Button, Card, Flex } from '@strapi/design-system';
import { BackButton, Layouts, Page } from '@strapi/strapi/admin'
import { Download} from "@strapi/icons";
import { useIntl } from 'react-intl';
import { useNavigate } from 'react-router-dom'
import { getTranslation } from '../utils/getTranslation';


const HomePage = () => {
  const { formatMessage } = useIntl();
  const navigate = useNavigate()
  
  return (
    <Layouts.Root>
      <Page.Title>{formatMessage({ id: getTranslation('plugin.name') })}</Page.Title>
      <Page.Main>
        <Layouts.Header
          title={formatMessage({ id: getTranslation('plugin.name') })}
          subtitle={formatMessage({
            id: getTranslation('index.header.description'),
            defaultMessage: 'View your Audit Logs',
          })}
          primaryAction={
            <Button startIcon={<Download />} variant="default" onClick={() => { alert("Esporta log - Azione da implementare"); }}>{formatMessage({ id: getTranslation('action.export') })}</Button>
          }
          navigationAction={<BackButton disabled={undefined} />}
        />
        <Layouts.Content>
          <Flex direction='column' alignItems='stretch' gap={3}>
            <Box>
              <Card padding={5}>
                <Box>
                  <Flex width={'100%'} minHeight={'50vh'} direction='column' alignItems='center' justifyContent={'center'} gap={3}>
                    contenuto?
                  </Flex>
                </Box>
              </Card>
            </Box>
          </Flex>
        </Layouts.Content>
      </Page.Main>
    </Layouts.Root>
  );
};

export { HomePage };