import { Link } from 'react-router-dom';
import { useAuth } from './AuthContext';

export default function Navigation() {
  const { token, logout } = useAuth();

  return (
    <nav className="bg-blue-600 text-white p-4 flex justify-between">
      <div className="space-x-4">
        <Link to="/">Dashboard</Link>
        <Link to="/tournaments">Turniere</Link>

        {token && <Link to="/players">Spieler</Link>}
        {token && <Link to="/teams">Teams</Link>}
      </div>
      <div>
        {token ? (
          <button onClick={logout} className="bg-red-500 px-3 py-1 rounded">
            Logout
          </button>
        ) : (
          <>
            <Link to="/register" className="px-3 py-1 border rounded">Register</Link>
            <span className="mx-2"></span>
            <Link to="/login" className="px-3 py-1 border rounded bg-green-500 text-white">Login</Link>
          </>
        )}
      </div>
    </nav>
  );
}
