"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

export default function DisplayNav() {
  const {user, logout, loading} = useAuth();
  const router = useRouter();

  function handleLogout() {
    logout();
    router.push("/");
  }

  return (
    <nav className="navbar">
      <Image className="mx-3"
        src="/logo_simple.png"
        alt="store_logo"
        width={50}
        height={50}
        id="logo"/>

      <div className="nav-links">
        <a href="/" className="nav-link">Home</a>
        <a href="/adopt" className="nav-link">Adopt a Pet</a>
        <a href="/" className="nav-link">Online Store</a>
        <a href="/appointments" className="nav-link">Schedule an Appointment</a>
        <a href="/contact" className="nav-link">Contact Us</a>
        <a href="/aboutus" className="nav-link">About Us</a>
      </div>

      <div className="nav-auth">
        {loading ? null : user ? (
          <>
            <a href="/profile" className="nav-link nav-greeting">
              Hello, {user.fullName || user.username}
            </a>
            <button className="nav-logout-btn" onClick={handleLogout}>
              Log Out
            </button>
          </>
        ) : (
          <>
            <a href="/login" className="nav-link">Log In</a>
            <a href="/register" className="nav-link nav-register-btn">Register</a>
          </>
        )}
      </div>
    </nav>
  );
}