"use client";
import { useClientCompany } from "@/utils/client-company";
import Image from "next/image";
import { FC } from "react";
import blankImage from "/public/static/images/blank.png";
import Link from "next/link";

const NavbarMain: FC = () => {
  const company_logo = useClientCompany("logo") ?? null;
  return (
    <nav className="w-full border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 sm:py-2">
      <div className="px-4  lg:px-6">
        <div className="flex-none  lg:justify-between sm:justify-between md:justify-between md:flex lg:flex sm:flex">
          <div className="flex-none justify-center md:flex lg:flex sm:flex">
            <div className="w-full mb-3 md:mb-0 lg:mb-0 flex  justify-between mt-2 md:mt-0 lg:mt-0">
              <div>
                <a href="/" className="mr-4 flex  justify-center">
                  {company_logo ? (
                    <img
                      src={`${company_logo}`}
                      alt="company-logo"
                      className="object-fill h-10"
                    />
                  ) : (
                    <Image alt="" src={blankImage} />
                  )}
                </a>
              </div>

              <div className="block md:hidden lg:hidden mr-2">
                <Link href="/client">
                  <button className="bg-blue-500 text-white mt-1 px-4 py-2 rounded-md">
                    Login
                  </button>
                </Link>
              </div>
            </div>
            <div className="flex items-center justify-center">
              <h1 className="text-center w-full font-bold text-nowrap">
                {useClientCompany("name")}
              </h1>
            </div>
          </div>
          <div className="px-4">
            <p className="text-gray-900 font-medium text-center md:text-left lg:text-left mt-2">
              {useClientCompany("address")}
            </p>
            <p className="text-center text-gray-700 text-sm my-2 md:my-0 lg:my-0">
              <span>Phone:</span> {useClientCompany("phone")}
            </p>
          </div>
          <div className="hidden md:block lg:block">
            <Link href="/client">
              <button className="bg-blue-500 text-white mt-1 px-4 py-2 rounded-md">
                Login
              </button>
            </Link>
          </div>

        </div>
      </div>
    </nav>
  );
};
export default NavbarMain;