import React from "react";
import { NavLink } from "react-router-dom";
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.css"
  rel="stylesheet"
/>;
/**
 * Represents the PublicNavBar component.
 * @interface
 */
function PublicNavBar() {
  return (
    <div
      className={" fixed top-0 left-0 w-100  z-50 backdrop-blur-sm bg-white/30"}
    >
      <nav className="nav flex flex-wrap items-center justify-between px-4 container  sticky top-0 z-50">
        <div className="flex flex-no-shrink items-center mr-6 py-3 text-grey-darkest logo">
          <a href="/">
            <img src="/psmsLogo.png" alt="PSMS" />
          </a>
        </div>

        <input className="menu-btn hidden" type="checkbox" id="menu-btn" />
        <label
          className="menu-icon block cursor-pointer lg:hidden px-2 py-4 relative select-none"
          htmlFor="menu-btn"
        >
          <span className="navicon bg-grey-darkest flex items-center relative"></span>
        </label>

        <ul className="menu border-b md:border-none flex justify-end list-reset m-0 w-full md:w-auto">
          <li className="py-2 px-3">
            <NavLink
              to="/login"
              className="rounded relative d-inline-flex group items-center justify-center px-3.5 py-2 
                  cursor-pointer  border-2 active:border-[#6eccaf] active:shadow-none shadow-lg  border-[#6eccaf] text-[#6eccaf]"
            >
              <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
              <span className="relative d-flex font-[600]"> Login </span>
            </NavLink>
          </li>
          <li className="py-2 ">
            <a
              href="/signup"
              className="rounded relative d-inline-flex group items-center justify-center px-3.5 py-2 
                cursor-pointer border-b-4 border-l-2 active:border-[6eccaf] active:shadow-none shadow-lg bg-gradient-to-tr from-[#6eccaf] to-[#86ddc1] border-[#58e3b7] text-white"
            >
              <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
              <span className="relative d-flex font-[600]"> Sign up </span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default PublicNavBar;