import React from "react";
import Link from "next/link";
import { tinaField } from "tinacms/dist/react";
import defaultLogo from "../../assets/img/logo.png";
import {GlobalHeader} from "../../tina/__generated__/types";

export const Header = ({ data }: { data: GlobalHeader }) => {
  return (
    <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
      <div className="flex grow justify-between px-6">
        <div className="flex navbar-brand">
            <Link
              href="/"
              className="container flex items-center"
            >
                <img src={ data.logoSrc || defaultLogo.src }/>
                <div className="flex flex-col">
                    <h3 className="title" data-tina-field={tinaField(data, "title")}>{data.title}</h3>
                    <div className="subtitle" data-tina-field={tinaField(data, "subtitle")}>{data.subtitle}</div>
                </div>
            </Link>
        </div>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className={`flex items-center` } id="navbarSupportedContent">
          <ul className="flex md:flex-row">
            {data.nav &&
              data.nav.map((item, i) => {
                /*const activeItem =
                  (item.href === ""
                    ? router.asPath === "/"
                    : router.asPath.includes(item.href)) && isClient;*/
                return (
                  <li
                    key={`${item.label}-${i}`}
                    className="nav-item"
                  >
                    <Link
                      data-tina-field={tinaField(item, "label")}
                      href={`${ item.external? "" : "/" }${ item.href }`}
                      className={`nav-link p-2 ${ item.external ? "external-link-icon" : ""}`}
                    >
                      {item.label}
                    </Link>
                  </li>
                );
              })}
          </ul>
        </div>
      </div>
    </nav>
  );
};