import React from 'react';
import {
  Footer,
  FooterContainer,
  FooterInfo,
  FooterInfoSection,
  FooterContent,
  FooterNavigation,
  FooterNavigationSection,
  FooterHeading,
  FooterList,
  FooterListItem,
  FooterLink,
} from '@digigov/ui/app/Footer';
import Copyright from '@digigov/ui/govgr/Footer/Copyright';
import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
import SectionBreak from '@digigov/ui/layouts/SectionBreak';
import Link from '@digigov/ui/navigation/Link';
import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';

export const FooterWithSecondaryNavigation = (_: any) => {
  return (
    <Footer>
      <FooterContainer>
        <FooterNavigation>
          <FooterNavigationSection aria-label="footer navigation section">
            <FooterHeading>Επιλογές</FooterHeading>
            <FooterList columns={2}>
              <FooterListItem>
                <FooterLink href="#">Υπηρεσίες</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">Φορείς</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">Αρχές</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">Όροι χρήσης</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
              </FooterListItem>
            </FooterList>
          </FooterNavigationSection>
          <FooterNavigationSection aria-label="footer navigation section">
            <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
            <FooterList>
              <FooterListItem>
                <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
              </FooterListItem>
              <FooterListItem>
                <FooterLink href="#">EUGO</FooterLink>
              </FooterListItem>
            </FooterList>
          </FooterNavigationSection>
        </FooterNavigation>
        <SectionBreak visible={false} size="md" />
        <FooterInfo>
          <FooterInfoSection grow aria-label="footer info section">
            <FooterContent>
              <Copyright>
                {`Υλοποίηση από το `}
                <Link href="https://grnet.gr/" target="_blank">
                  ΕΔΥΤΕ
                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
                </Link>
                {` για το `}
                <Link href="https://mindigital.gr/" target="_blank">
                  Υπουργείο Ψηφιακής Διακυβέρνησης
                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
                </Link>
              </Copyright>
            </FooterContent>
          </FooterInfoSection>
          <FooterInfoSection>
            <HellenicRepublicLogo></HellenicRepublicLogo>
          </FooterInfoSection>
        </FooterInfo>
      </FooterContainer>
    </Footer>
  );
};

export default FooterWithSecondaryNavigation;
