import type { ReactNode } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
import { btn } from "./ui";

export function TopBar({ right }: { right?: ReactNode }) {
  const { user, isAdmin, logout } = useAuth();
  return (
    <header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
      <Link to="/" className="font-serif text-lg font-semibold tracking-wide">
        Book<span className="text-amber-500">Lib</span>
      </Link>
      {isAdmin && (
        <Link
          className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
          to="/admin/users"
        >
          用户
        </Link>
      )}
      {isAdmin && (
        <Link
          className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
          to="/admin/libraries"
        >
          库管理
        </Link>
      )}
      <div className="ml-auto flex items-center gap-3">
        {right}
        <span className="text-sm text-stone-400">
          {user?.username}
          {isAdmin ? "(admin)" : ""}
        </span>
        <button className={btn} onClick={logout}>
          退出
        </button>
      </div>
    </header>
  );
}