"use client";

import Link from "next/link";
import { useAuth } from "@/lib/auth";

export default function AuthHeader() {
  const { user, isLoggedIn, logout } = useAuth();

  // 手机端顶栏由 Sidebar 组件处理，这里只渲染桌面端顶栏
  return (
    <header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
      {isLoggedIn ? (
        <>
          <span className="text-sm text-slate-500">{user?.email}</span>
          {user?.role === "admin" && (
            <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Admin</span>
          )}
          <button onClick={logout}
            className="text-sm text-slate-600 hover:text-red-500 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-red-300 transition-colors">
            退出
          </button>
        </>
      ) : (
        <>
          <Link href="/login"
            className="text-sm text-slate-600 hover:text-blue-600 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-blue-300 transition-colors">
            登录
          </Link>
          <Link href="/register"
            className="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors font-medium">
            注册
          </Link>
        </>
      )}
    </header>
  );
}