"use client";

import { useState } from "react";
import { NavLinks, NavMobileMenu, NavMenuBtn } from "./";
import Image from "next/image";
import LogoGif from "@/assets/contigo-logotipo.gif";

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <header className="fixed top-0 w-full md:max-w-[79rem] bg-white h-[6.25rem] md:top-12 md:w-[95%] md:left-1/2 md:-translate-x-1/2 md:h-[5rem] md:rounded-[6rem] z-50 shadow-[0_0.25rem_1rem_rgba(0,0,0,.15)]">
      <nav className="flex justify-between items-center w-full h-full px-4 md:px-10">
        <Image
          alt="Contigo Salud Logo"
          src={LogoGif}
          unoptimized
          className="[--width:60%] md:[--width:25%] w-[min(var(--width),12.5rem)]"
        />
        <div className="hidden md:flex">
          <NavLinks />
        </div>
        <NavMenuBtn isOpen={menuOpen} onToggle={() => setMenuOpen((prev) => !prev)} />
        <NavMobileMenu isOpen={menuOpen} setMenuOpen={setMenuOpen} />
      </nav>
    </header>
  );
};

export default Navbar;