import {useState} from 'react';
import classNames from 'classnames';
import {MenuIcon} from '@heroicons/react/outline';
import {XIcon} from '@heroicons/react/solid';
import AuthHeader from './auth-header';
import NavLink from '../../shared/buttons/nav-link';

function Header() {
  const [isHidden, setIsHidden] = useState(true);
  const iconSize = 34;

  return (
    <header className='sticky top-0 z-50'>
      <nav className='flex flex-wrap items-center justify-between bg-gray-800 p-2'>
        <NavLink to='/' color='transparent' className='hidden md:block'>
          <p className='text-lg font-bold'>Med Moshaver</p>
        </NavLink>

        <AuthHeader className='mx-2 md:order-last' />

        <div className='flex md:hidden'>
          <div className='flex md:hidden'>
            <button id='hamburger' onClick={() => setIsHidden(isHidden => !isHidden)}>
              <MenuIcon
                width={iconSize}
                height={iconSize}
                className={classNames(
                  'toggle block',
                  {hidden: !isHidden},
                  'rounded-md border-2 border-blue-500 stroke-current p-1 text-blue-500'
                )}
              />
              <XIcon
                width={iconSize}
                height={iconSize}
                className={classNames(
                  'toggle block',
                  {hidden: isHidden},
                  'rounded-md border-2 border-blue-500 stroke-current p-1 text-blue-500'
                )}
              />
            </button>
          </div>
        </div>

        <div
          className={classNames(
            'toggle',
            {hidden: isHidden},
            'text-bold mt-5 w-full text-right md:mt-0 md:flex md:w-auto',
            'border-t-2 border-blue-900 md:border-none'
          )}
        >
          {links.map(link => (
            <div
              key={link.id}
              className={`
                w-100 block rounded-none border-t-2 border-blue-500
                px-1 py-1 md:inline-block md:border-none
              `}
            >
              <NavLink to={link.href} textSize='base' color='transparent'>
                {link.name}
              </NavLink>
            </div>
          ))}
        </div>
      </nav>
    </header>
  );
}

const links = [
  {id: 1, name: 'خانه', href: '/'},
  {id: 2, name: 'فروش', href: '/orders'}
];

export default Header;
