import { Link, useNavigate } from "react-router-dom";

function Navbar(){

    const navigate = useNavigate()
    const handleLogout = () => {
        localStorage.removeItem('user')
        navigate('/')
    }

    return(
 <nav className="bg-blue-400 text-white px-6 py-8 flex items-center justify-between">
    <h1 className="text-x1 font-bold">SmartPark</h1>
    <div className="flex gap-6"> 
     <Link to="/dashboard" className="hover:text-yellow-300">Dashboard</Link>
      <Link to="/cars" className="hover:text-yellow-300">Car</Link>
      <Link to="/parkingSlots" className="hover:text-yellow-300">ParkingSlot</Link>
      <Link to="/parkingRecords" className="hover:text-yellow-300">ParkingRecord</Link>
      <Link to="/payments" className="hover:text-yellow-300">Payment</Link>
      <Link to="/reports" className="hover:text-yellow-300">Reports</Link>
</div>
      <button onClick={handleLogout} className="bg-red-500 hover:bg-red-600 px-4 py-3">Logout</button>
 </nav>
    )
}

export default Navbar