"use client";
import { useRouter } from "next/navigation";
import { useUser } from '@clerk/clerk-react'
import { useState } from "react";
import { useClerk } from "@clerk/clerk-react";


export default function Navbar({ is_game }) {
  const router = useRouter();
  const { isSignedIn } = useUser()
  const [isMenuOpen, setIsMenuOpen] = useState(false); 
  const { signOut } = useClerk();

  const goToLogin = (e) => {
    e.preventDefault();
    router.push("/sign-in");
  };
  

  return (
    <>
      <div
        className="fixed top-4 right-4 bg-white shadow-lg rounded-lg p-2 cursor-pointer z-50"
        onClick={() => setIsMenuOpen(!isMenuOpen)}
      >
        <svg
          className="w-6 h-6 text-black"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M4 6h16M4 12h16m-7 6h7"
          ></path>
        </svg>
      </div>

      <div
        className={`fixed top-16 right-4 bg-white shadow-lg rounded-lg w-48 p-4 transition-transform duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'} z-50`}
      >
        <ul className="flex flex-col space-y-2">
          {isSignedIn ? (
            <>
              <li>
                <a
                  href="/dashboard"
                  className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100"
                >
                  Home
                </a>
              </li>
              <li>
                <a
                  href="/dashboard"
                  className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100"
                >
                  Dashboard
                </a>
              </li>
              <li>
                <a
                  href="/pricing"
                  className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100"
                >
                  Pricing
                </a>
              </li>
              <li className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100">
                <button
                  type="button"
                  onClick={() => signOut({ redirectUrl: '/' })}
                  className=""
                >
                  Logout
                </button>
              </li>
            </>
          ) : (
            <>
              <li>
                <a
                  href="/"
                  className="block py-2 px-3 text-sm text-black rounded font-normal hover:bg-gray-100"
                >
                  Home
                </a>
              </li>
              <li>
                <a
                  href="/pricing"
                  className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100"
                >
                  Pricing
                </a>
              </li>
              <li className="block py-2 px-3 text-black rounded font-normal text-sm hover:bg-gray-100">
                <button
                  type="button"
                  onClick={goToLogin}
                
                >
                  Login
                </button>
              </li>
            </>
          )}
        </ul>
      </div>
    </>
  );
}