"use client";
import { useState } from "react";
import Link from "next/link";
import styles from "./header.module.scss";
import { Logo } from "../general/Logo";

export const Header = () => {
  const [showMenu, setShowMenu] = useState(false);
  function toggleMenu() {
    setShowMenu(!showMenu);
  }

  return (
    <header className={styles.header}>
      <Link href="/" aria-label="Hjem">
        <Logo />
      </Link>
      <nav className={styles.siteMenu} data-show={showMenu}>
        <ul className={styles.mainMenu}>
          <li>
            <Link href="/arrangementer">Arrangementer</Link>
          </li>
          <li>
            <Link href="/">Praktisk info</Link>
          </li>
          <li>
            <Link href="/utleie">Utleie</Link>
          </li>
          <li>
            <Link href="/">Bli medlem</Link>
          </li>
        </ul>
        <button
          className={styles.toggleMenu}
          aria-label="Vis meny"
          onClick={toggleMenu}
        >
          <span className={styles.menuIcon}></span>
        </button>
        <ul className={styles.fullMenu}>
          <li className={styles.menuItemLarge}>
            <Link href="/arrangementer">Arrangementer</Link>
          </li>
          <li className={styles.menuItemLarge}>
            <Link href="/">Praktisk info</Link>
          </li>
          <li className={styles.menuItemLarge}>
            <Link href="/utleie">Utleie</Link>
          </li>
          <li className={styles.menuItemLarge}>
            <Link href="/">Bli medlem</Link>
          </li>
          <li className={styles.divider}>
            <Link href="/aktuelt">Siste nytt</Link>
          </li>
          <li>
            <Link href="/">Om oss</Link>
          </li>
          <li>
            <Link href="/">Kontakt</Link>
          </li>
          <li>
            <Link href="/">Bli frivillig</Link>
          </li>
          <li className={styles.search}>
            <label>
              <p>Søk</p>
              <input type="text" />
            </label>
          </li>
          <li className={styles.galtinn}>
            <Link href="/">Mitt medlemskap &rarr;</Link>
          </li>
          <li>
            {/* TODO: skal trolig ikke være så synlig ved lansering */}
            <Link href="/lokaler">Lokaler*</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};