import { Link } from "react-router-dom"
import useAuthStore from "../store/useAuthStore.js"

function Navbar({ isLoggedIn }) {
    const { logout, user } = useAuthStore()

    return (
        <div className="w-screen flex justify-around bg-slate-900 py-8">
                <Link to={isLoggedIn ? "/dashboard": "/login"} className="hover:scale-104 transition duration-300 hover:text-slate-600">Go Home</Link>
            <nav className="flex gap-8">
                {isLoggedIn ? (
                    <>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600"  to="/">Home</Link>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600"  to="/student">Student</Link>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600"  to="/payment">Payment</Link>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600"  onClick={logout}>Logout</Link>
                        <span className="hover:scale-104 transition duration-300 hover:text-red-800 text-red-600" >{user.username}</span>
                    </>
                ): (
                    <>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600" to="/login">Login</Link>
                        <Link className="hover:scale-104 transition duration-300 hover:text-slate-600" to="/register">Register</Link>
                    </>
                )}
            </nav>
        </div>
    )
}

export default Navbar