import React from 'react';

import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/app/Masthead';
import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
import mineduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
import { Container } from '@digigov/ui/layouts/Basic/Container';
import { Main } from '@digigov/ui/layouts/Basic/Main';
import Link from '@digigov/ui/navigation/Link';
import { Heading } from '@digigov/ui/typography/Heading';
import Hint from '@digigov/ui/typography/Hint';

export const WithElements = (_: any) => (
  <Masthead>
    <Container>
      <Main>
        <MastheadLogo src={mineduLogo} alt="minedu logo" />
        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
        <MastheadBody>
          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
          ήδη γίνει. <Link>Προτείνετε βελτιώσεις.</Link>
        </MastheadBody>
        <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>
        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
      </Main>
    </Container>
  </Masthead>
);

export default WithElements;