import dynamic from "next/dynamic"
import Image from "next/image"
import IndoteknikLogo from "@/images/logo.png"
import { Bars3Icon, HeartIcon, ShoppingCartIcon } from "@heroicons/react/24/outline"
import Link from "../Link/Link"
import useSidebar from "@/core/hooks/useSidebar"

const Search = dynamic(() => import("./Search"))

const Navbar = () => {
  const { Sidebar, open } = useSidebar()
  return (
    <>
      <nav className="px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow">
        <div className="flex justify-between items-center mb-2">
          <Link href="/">
            <Image src={IndoteknikLogo} alt="Indoteknik Logo" width={120} height={40} />
          </Link>
          <div className="flex gap-x-3">
            <button type="button">
              <HeartIcon className="w-6 text-gray_r-12" />
            </button>
            <Link href="/shop/cart">
              <ShoppingCartIcon className="w-6 text-gray_r-12" />
            </Link>
            <button type="button" onClick={open}>
              <Bars3Icon className="w-6 text-gray_r-12" />
            </button>
          </div>
        </div>
        <Search />
      </nav>
      { Sidebar }
    </>
  )
}

export default Navbar