import { Link } from "react-router-dom";
function Navbar({ isAuthenticated, authUser, logout }) {

    return (
    <div className="w-screen flex justify-center items-center bg-blue-100">
        {isAuthenticated ? (
            <nav className="flex justify-between items-center w-screen bg-blue-700 p-4">                
                <Link to="/home" className="text-white bg-blue-500 px-4 py-2 rounded hover:bg-blue-800 transition duration-500">Home</Link>
                <div className="flex flex items-center gap-8">
                    <span className="text-red-500 text-lg font-bold px-4 py-2 rounded bg-blue-800 ">{authUser}</span>
                    <Link onClick={logout} className="text-white bg-red-500 px-4 py-2 rounded hover:bg-red-700 transition duration-500">Logout</Link>
                </div>
            </nav>
        ): (
            <nav className="flex justify-between items-center w-screen bg-blue-600 p-4">
                <Link to="/login" className="text-white px-4 py-2 bg-blue-500  rounded hover:bg-blue-700 transition duration-500">Login</Link>
                <Link to="/register" className="text-white px-4 py-2 bg-blue-500 rounded hover:bg-blue-700 transition duration-500">Register</Link>
            </nav>
        )}
    </div>
  )
}

export default Navbar