import React from "react";
import Nav from "./Nav";
import Link from "next/link";
import Image from "next/image";
import LoginButton from "./LoginButton";
import SocialLinks from "../contact/SocialLinks";
import { getSiteSettings } from "@/utils/siteSettings";

export default async function Header() {
  const siteSettings = await getSiteSettings();
  const siteName = siteSettings.site_name || "Jsite";
  const mobile = siteSettings.mobile;
  const tel = siteSettings.tel;
  const email = siteSettings.email;

  return (
    <header className="relative w-full !bg-[#fefefe]">
      <nav className="navbar navbar-expand-lg transparent navbar-light w-full">
        <div className="w-full flex flex-row flex-nowrap items-center px-4">
          <div className="navbar-brand">
            <Link href={`/`}>
              <Image
                srcSet="/assets/img/logo-dark@2x.png 2x"
                alt="image"
                src="/assets/img/logo-dark.png"
                width={96}
                height={24}
              />
            </Link>
          </div>
          <div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
            <div className="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
              <h3 className="!text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
                {siteName}
              </h3>
              <button
                type="button"
                className="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]"
                data-bs-dismiss="offcanvas"
                aria-label="Close"
              />
            </div>
            <div className="offcanvas-body flex flex-col !h-full">
              <Nav color="#1fc76f" />
              {/* /.navbar-nav */}
              <div className="offcanvas-footer xl:!hidden lg:!hidden">
                <div>
                  {mobile}
                  <br />
                  {tel} 
                  <br />
                  <a
                    href={`mailto:${email}`}
                    className="link-inverse"
                  >
                  {email}
                  </a>
                  <SocialLinks />
                  {/* /.social */}
                </div>
              </div>
              {/* /.offcanvas-footer */}
            </div>
            {/* /.offcanvas-body */}
          </div>
          {/* /.navbar-collapse */}
          <div className="navbar-other w-full !flex !ml-auto">
            <ul className="navbar-nav !flex-row !items-center !ml-auto">
              <li className="nav-item dropdown language-select uppercase group">
                <LoginButton color="#1fc76f" />
              </li>
              <li className="nav-item xl:!hidden lg:!hidden">
                <button className="hamburger offcanvas-nav-btn">
                  <span />
                </button>
              </li>
            </ul>
            {/* /.navbar-nav */}
          </div>
          {/* /.navbar-other */}
        </div>
        {/* /.container */}
      </nav>
      {/* /.navbar */}
    </header>
  );
}