import { Link } from "react-router-dom"

function Navbar({ authUser, logout }) {
  return (
    <nav className="bg-slate-800 text-white px-6 py-4">
      <div className="flex items-center justify-between max-w-7xl mx-auto">
        {authUser ? (
          authUser.role == "admin" ? (
            <div className="flex items-center gap-8">
              <div className="flex items-center gap-6">
                <Link to="/dashboard" className="hover:text-slate-300 transition-colors font-medium">Dashboard</Link>
                <Link to="/students" className="hover:text-slate-300 transition-colors font-medium">Students</Link>
                <Link to="/courses" className="hover:text-slate-300 transition-colors font-medium">Courses</Link>
              </div>
              <div className="flex items-center gap-4">
                <span className="text-slate-300 text-sm">
                  {authUser.username} <span className="bg-indigo-600 px-2 py-0.5 rounded text-xs uppercase">{authUser.role}</span>
                </span>
                <button onClick={logout} className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm font-medium transition-colors">Logout</button>
              </div>
            </div>
          ): (
            <div className="flex items-center gap-6">
              <Link to="/dashboard" className="hover:text-slate-300 transition-colors font-medium">Dashboard</Link>
              <span className="text-slate-300 text-sm">{authUser.username}</span>
              <button onClick={logout} className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm font-medium transition-colors">Logout</button>
            </div>
          )
        ) : (
          <div className="flex items-center gap-4">
            <Link to="/login" className="hover:text-slate-300 transition-colors font-medium">Login</Link>
            <Link to="/register" className="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded font-medium transition-colors">Register</Link>
          </div>
        )}
      </div>
    </nav>
  )
}

export default Navbar