import { h, Fragment } from "../jsx";

interface HeaderProps {
  showLogout?: boolean;
}

export function Header({ showLogout }: HeaderProps): string {
  return (
    <header className="header">
      <div className="container">
        <nav className="nav">
          <a href="/" className="logo">
            <span className="logo-mark">p</span>
            <span className="logo-text">Paliad</span>
          </a>
          <div className="nav-right">
            {showLogout && (
              <Fragment>
                <a href="/tools/kostenrechner" className="nav-link" data-i18n="nav.kostenrechner">Kostenrechner</a>
                <a href="/tools/procedures" className="nav-link" data-i18n="nav.procedures">Verfahren &amp; Fristen</a>
                <a href="/logout" className="nav-logout" data-i18n="nav.logout">Abmelden</a>
              </Fragment>
            )}
            <div className="nav-lang">
              <button className="lang-btn lang-active" data-lang-toggle="de" type="button">DE</button>
              <span className="lang-sep">/</span>
              <button className="lang-btn" data-lang-toggle="en" type="button">EN</button>
            </div>
          </div>
        </nav>
      </div>
    </header>
  );
}
