import { useRouter } from "next/router"
import Link from "../Link/Link"
import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from "@heroicons/react/24/outline"

const AppBar = ({ title }) => {
  const router = useRouter()

  return (
    <nav className="sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between">
      <div className="flex items-center">
        <button type="button" className="p-4" onClick={() => router.back()}>
          <ChevronLeftIcon className="w-6 stroke-2" />
        </button>
        <div className="font-semibold text-h-md">
          { title }
        </div>
      </div>
      <div className="flex items-center px-2">
        <Link href="/shop/cart" className="py-4 px-2">
          <ShoppingCartIcon className="w-6 text-gray_r-12" />
        </Link>
        <Link href="/" className="py-4 px-2">
          <HomeIcon className="w-6 text-gray_r-12" />
        </Link>
        <Link href="/shop/cart" className="py-4 px-2">
          <Bars3Icon className="w-6 text-gray_r-12" />
        </Link>
      </div>
    </nav>
  )
}

export default AppBar