import React, { useState } 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 { Button } from '@digigov/ui/form';
import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
import { BurgerIcon } from '@digigov/ui/icons';
import { Top } from '@digigov/ui/layouts/Basic';
import { NavListAuto } from '@digigov/ui/navigation/NavList';

export const WithNavigation = (_: any) => {
  const [open, setOpen] = useState(false);

  return (
    <Top>
      <Header>
        <HeaderContent>
          <HeaderSection>
            <GovGRLogo href="#" />
          </HeaderSection>
          <HeaderSection>
            <Button variant="link" smUpHidden onClick={() => setOpen(!open)}>
              <BurgerIcon size="md" />
            </Button>
          </HeaderSection>
        </HeaderContent>
      </Header>
      <NavListAuto
        links={[
          { name: 'home', label: 'Αρχική', href: '#home' },
          { name: 'news', label: 'Νέα', href: '#news' },
          { name: 'links', label: 'Σύνδεσμοι', href: '#links' },
          { name: 'contact', label: 'Επικοινωνία', href: '#contact' },
        ]}
        open={open}
        drawer="smDown"
        onClose={() => setOpen(false)}
      />
    </Top>
  );
};

export default WithNavigation;