import { Link } from 'react-router-dom'
import useAuthStore from "../store/useAuthStore.js"
function Navbar({ isLoggedIn, user }) {
    const { logout } = useAuthStore()
    const handleLogout = () => {
        logout()
    }
  return (
    <div className=' w-1/4 bg-slate-950 p-8 text-white text-2xl flex min-h-screen'>
        {isLoggedIn ? (
            <nav className='flex flex-col text-center gap-3'>
                <p className='text-center text-red-700'>Welcome Back {user.username}</p>
                <Link className='hover:bg-blue-600 py-2 rounded bg-purple-700 transition duration-500' to="/">Home</Link>
                <Link className='hover:bg-red-600 py-2 rounded bg-red-700 transition duration-500' onClick={handleLogout}>Logout</Link>
            </nav>
        ): (
            <nav className='flex flex-col w-full text-center gap-3'>
                <Link to="/login" className='hover:bg-purple-600 py-2 rounded bg-purple-700 transition duration-500'>Login</Link>
                <Link to="/register" className='hover:bg-purple-600 py-2 rounded bg-purple-700 transition duration-500'>Register</Link>
            </nav>
        )}
    </div>
  )
}

export default Navbar