import { useState } from 'react';
import { ChevronUpIcon, CloseIcon, ListIcon } from '../Icons/Icons';
import HeaderNav from './HeaderNav/HeaderNav';
import IecepLogo from '../IecepLogo/IecepLogo';

type Props = {
  path: string;
};

const Header = ({ path }: Props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const handleToggleDropdown = () => {
    setDropdownOpen((dropdownOpen) => !dropdownOpen);
  }

  const handleCloseDropdown = () => {
    setDropdownOpen(false);
  }

  return (
    <>
      <header className='header'>
        <div className='logo'>
          <a href='/' className='logo-link'>
            <IecepLogo />
          </a>
          <a href='/' className='logo-text'>UP IECEP</a>
        </div>
        <HeaderNav handleCloseDropdown={ handleCloseDropdown } />
        <div className='apply-now'>
          <a href='apply'>
            Apply Now!
          </a>
          <button type='button' className='dropdown' onClick={ handleToggleDropdown }>
            { dropdownOpen ? <CloseIcon /> : <ListIcon /> }
          </button>
        </div>
      </header>
      { dropdownOpen && (
        <div className='dropdown-list'>
          <HeaderNav handleCloseDropdown={ handleCloseDropdown } />
          <button type='button' onClick={ handleCloseDropdown }>
            <ChevronUpIcon />
          </button>
        </div>
      ) }
    </>
  );
};

export default Header;
