import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "../hooks/useAuth";
import { getMe } from "../api/client";

export default function Nav() {
  const { logout } = useAuth();
  const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });

  return (
    <nav style={{
      display: "flex",
      alignItems: "center",
      gap: 16,
      padding: "12px 24px",
      borderBottom: "1px solid #ccc",
    }}>
      <Link to="/" style={{ fontWeight: "bold" }}>Home</Link>
      <Link to="/apps">Apps</Link>
      {user?.is_admin && <Link to="/admin">Admin</Link>}
      <Link to="/profile" style={{ marginLeft: "auto" }}>Profile</Link>
      <button onClick={logout} style={{ cursor: "pointer" }}>Logout</button>
    </nav>
  );
}