import React from 'react';
import { Header } from '@digigov/ui/app/Header';
import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
import { GovGRFooter } from '@digigov/ui/govgr/Footer';
import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
import { Layout } from '@digigov/ui/layouts/Basic';
import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
import { Container } from '@digigov/ui/layouts/Basic/Container';
import { Main } from '@digigov/ui/layouts/Basic/Main';
import { Top } from '@digigov/ui/layouts/Basic/Top';
import { Heading, Paragraph } from '@digigov/ui/typography';

export const Default = (_: any) => (
  <Layout>
    <Top>
      <Header>
        <HeaderContent>
          <HeaderSection>
            <GovGRLogo />
          </HeaderSection>
        </HeaderContent>
      </Header>
    </Top>
    <Container>
      <Main>
        <Heading>Τίτλος σελίδας</Heading>
        <Paragraph>
          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο Bottom component
        </Paragraph>
      </Main>
    </Container>
    <Bottom>
      <GovGRFooter></GovGRFooter>
    </Bottom>
  </Layout>
);

export default Default;