import Image from "next/image";
import { useRouter } from "next/router";

import React from "react";
import Logo from "../../assets/images/graduation-event-logo.png";
import { useAuth } from "../../context/Auth";
import TopBar from "./topbar";
import Link from "next/link";
import Cookies from "js-cookie";
const LoginNavbar: React.FC = () => {
  const { user, logout } = useAuth();
  const router = useRouter();
  const ceremonyId = Cookies.get('ceremonyId');
  return (
    <>
      {/* <TopBar /> */}
      <nav className="bg-white px-2 lg:px-48 py-2.5 rounded ">
        <div className="container flex flex-wrap items-center justify-between mx-auto">
          <div className="flex content-start object-contain sm:w-1/12 w-2/12">
            <Image
              src={Logo}
              className=" object-contain"
              alt="Graduation Logo"
            />
          </div>
          
            <button
              onClick={logout}
              className="bg-red-500 shadow-lg inline-flex items-center p-2 ml-3 text-sm text-white rounded-lg "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="feather feather-log-out mr-2"
              >
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                <polyline points="16 17 21 12 16 7"></polyline>
                <line x1="21" y1="12" x2="9" y2="12"></line>
              </svg>
              Logout
            </button>

          {/* <div className="hidden w-full lg:block lg:w-auto" id="navbar-default">
            <ul className=" items-center flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 lg:mt-0 lg:text-sm lg:font-medium lg:border-0 lg:bg-white  ">
              <li className="border rounded bg-red-700 px-4 py-2">
                <button
                  onClick={logout}
                  className=" flex  text-white lg:hover:bg-transparent lg:border-0  lg:p-0   text-base"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="feather feather-log-out mr-2"
                  >
                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                    <polyline points="16 17 21 12 16 7"></polyline>
                    <line x1="21" y1="12" x2="9" y2="12"></line>
                  </svg>
                  Logout
                </button>
              </li>
            </ul>
          </div> */}
        </div>
      </nav>
      <div className="h-2 w-full" style={{ backgroundColor: "#0f172a" }}></div>
    </>
  );
};

export default LoginNavbar;