src/components/layout/Header.tsx

'use client'

import { emitAuthChanged, useAuth } from 'hooks/useAuth'
import { useRouter, usePathname } from 'next/navigation'
import Link from 'next/link'

export function Header() {
  const { user, loading } = useAuth()
  const router = useRouter()
  const pathname = usePathname()

  const handleLogout = async () => {
    await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
    emitAuthChanged()
    router.push('/')
  }

  if (user) {
    // Logged in header
    return (
      <>
        <header className={`header${pathname === '/' ? ' margin' : ''}`}>
          <div className="frame">
            <div className="content">
              <Link href="/" className="logo" title="Let's Chat">
                <img src="/media/custom/header-logo.svg" alt="Let'sChat" title="Let's Chat" />
              </Link>

              <nav>
                <ul className="menu">
                  <li className="logged">
                    <span className="icon menu icon-chats"></span>
                    <Link href="/dashboard" title="Moje Let's Chatky" className={pathname === '/dashboard' ? 'active' : ''}>
                      Moje Let's&nbsp;Chatky
                    </Link>
                  </li>
                  <li className="logged">
                    <span className="icon menu icon-profile"></span>
                    <Link href="/profile" title="Můj profil" className={pathname === '/profile' ? 'active' : ''}>
                      Můj profil
                    </Link>
                  </li>
                  <li className="wave"></li>
                  <li>
                    <span className="icon menu icon-help"></span>
                    <Link href="/help" title="Pomoc">Pomoc</Link>
                  </li>
                  <li>
                    <span className="icon menu icon-logout"></span>
                    <button onClick={handleLogout} title="Odhlášení">Odhlášení</button>
                  </li>
                </ul>

                <a id="menu-burger" href="#" className="burger">
                  <img src="/media/icon/menu.svg" alt="Menu" title="Menu" />
                </a>
              </nav>
            </div>
          </div>
        </header>

        <div id="menu-box">
          <a href="#" className="close">
            <img src="/media/icon/close.svg" alt="Zavřít" title="Zavřít" />
          </a>

          <ul>
            <li className="logged">
              <span className="icon menu icon-chats"></span>
              <Link href="/dashboard" title="Moje Let's Chatky">Moje Let's&nbsp;Chatky</Link>
            </li>
            <li className="logged">
              <span className="icon menu icon-profile"></span>
              <Link href="/profile" title="Můj profil">Můj profil</Link>
            </li>
            <li>
              <span className="icon menu icon-help"></span>
              <Link href="/help" title="Pomoc">Pomoc</Link>
            </li>
            <li>
              <span className="icon menu icon-logout"></span>
              <button onClick={handleLogout} title="Odhlášení">Odhlášení</button>
            </li>
          </ul>
        </div>
      </>
    )
  }

  // Not logged in header
  return (
    <>
      <header className={`header${pathname === '/' ? ' margin' : ''}`}>
        <div className="frame">
          <div className="content">
            <Link href="/" className="logo" title="Let's Chat">
              <img src="/media/custom/header-logo.svg" alt="Let'sChat" title="Let's Chat" />
            </Link>

            <nav>
              <ul className="menu">
                <li className="wave"></li>
                <li>
                  <span className="icon menu icon-about"></span>
                  <Link href="/about" title="Co je Let's Chat">Co je Let's&nbsp;Chat</Link>
                </li>
                <li>
                  <span className="icon menu icon-login"></span>
                  <Link href="/login" title="Přihlásit" className={pathname === '/login' ? 'active' : ''}>
                    Přihlásit
                  </Link>
                </li>
                <li>
                  <span className="icon menu icon-register"></span>
                  <Link href="/register" title="Registrace" className={pathname === '/register' ? 'active' : ''}>
                    Registrace
                  </Link>
                </li>
              </ul>

              <a id="menu-burger" href="#" className="burger">
                <img src="/media/icon/menu.svg" alt="Menu" title="Menu" />
              </a>
            </nav>
          </div>
        </div>
      </header>

      <div id="menu-box">
        <a href="#" className="close">
          <img src="/media/icon/close.svg" alt="Zavřít" title="Zavřít" />
        </a>

        <ul>
          <li>
            <span className="icon menu icon-about"></span>
            <Link href="/about" title="Co je Let's Chat">Co je Let's&nbsp;Chat</Link>
          </li>
          <li>
            <span className="icon menu icon-login"></span>
            <Link href="/login" title="Přihlásit">Přihlásit</Link>
          </li>
          <li>
            <span className="icon menu icon-register"></span>
            <Link href="/register" title="Registrace">Registrace</Link>
          </li>
        </ul>
      </div>
    </>
  )
}