import { CartFill, PersonCircle } from "react-bootstrap-icons";
import "./stylesheets/navbar.css";
import "./stylesheets/shared.css";

export default function Navbar() {
  return(
    <>
      <header>
          <nav className="navbar inset-x-0 top-0 bg-white shadow-2 items-center justify-between bg-neutral-100 py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
               data-te-navbar-ref>
            <div className="flex w-full flex-wrap items-center justify-between px-3">
              {/* Lado izquierdo */}
              <div className="flex-grow basis-[100%] items-center lg:!flex lg:basis-auto">
                <img className="logo" src="https://www.grupoarma.com.mx/imagen/logo.png"/>

                <ul className="list-style-none mr-auto flex flex-col pl-0 lg:flex-row">
                  <li className="mb-4 lg:mb-0 lg:pr-2">
                    <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
                       href="/products">
                      Productos
                    </a>
                  </li>

                  <li className="mb-4 lg:mb-0 lg:pr-2">
                    <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
                       href="/products">
                      Proveedores
                    </a>
                  </li>
                </ul>
              </div>

              { /* Lado derecho */}
              <div className="relative flex items-center">
                <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                   href="#">
                  <span className="[&>svg]:w-5">
                    <CartFill color="#394490" size={32}/>
                  </span>
                </a>

                <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                   href="#">
                  <span className="[&>svg]:w-5">
                    <PersonCircle color="#394490" size={32}/>
                  </span>
                </a>
              </div>
            </div>
          </nav>
      </header>
    </>
  );
}