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 HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
import Button from '@digigov/ui/form/Button';
import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
import { ChevronIcon, MoreVertIcon } from '@digigov/ui/icons';
import { Top } from '@digigov/ui/layouts/Basic';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavListItemAction } from '@digigov/ui/navigation/NavList';
import NavList from '@digigov/ui/navigation/NavList/NavList';

export const WithHeaderNavigation = (_: any) => {
  return (
    <Top>
      <Header>
        <HeaderContent>
          <HeaderSection>
            <GovGRLogo />
            <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
          </HeaderSection>
          <HeaderSection>
            <Button variant="link">
              Μενού <ChevronIcon direction="down" />
            </Button>
            <Dropdown align="right">
              <DropdownButton variant="link">
                ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
                <MoreVertIcon size="md" />
              </DropdownButton>
              <DropdownContent>
                <NavList layout="vertical">
                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
                </NavList>
              </DropdownContent>
            </Dropdown>
          </HeaderSection>
        </HeaderContent>
      </Header>
    </Top>
  );
};

export default WithHeaderNavigation;