import React from "react";
import { User, LogOut, Menu } from "lucide-react";

interface TopNavProps {
  title: string;
  icon?: React.ReactNode;
  userName?: string;
  userRole?: string;
  onSignOut?: () => void;
  onToggleSidebar?: () => void;
}

export default function TopNav({
  title,
  icon,
  userName,
  userRole,
  onSignOut,
  onToggleSidebar,
}: TopNavProps) {
  return (
    <header className="sticky top-0 z-40 h-16 flex items-center justify-between px-4 sm:px-6 bg-white/90 border-b border-slate-200 backdrop-blur-xl shadow-sm">
      <div className="flex items-center gap-2 sm:gap-3">
        {/* 移动端菜单按钮 */}
        {onToggleSidebar && (
          <button
            onClick={onToggleSidebar}
            className="md:hidden p-2 rounded-lg text-slate-500 hover:text-slate-950 hover:bg-slate-100 transition"
            aria-label="打开菜单"
          >
            <Menu className="w-5 h-5" />
          </button>
        )}
        {icon}
        <h1 className="text-base sm:text-lg font-semibold text-slate-900 tracking-wide truncate">
          {title}
        </h1>
      </div>

      <div className="flex items-center gap-2 sm:gap-3">
        <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-md bg-slate-50 border border-slate-200">
          <User className="w-4 h-4 text-blue-600" />
          <span className="text-sm text-slate-600">{userName ?? "User"}</span>
          {userRole && (
            <span className="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-slate-500">
              {userRole}
            </span>
          )}
        </div>
        <button
          onClick={onSignOut}
          className="p-2 rounded-md border border-slate-200 text-slate-500 hover:text-slate-950 hover:bg-slate-100 transition"
          title="退出登录"
        >
          <LogOut className="w-4 h-4 text-blue-600" />
        </button>
      </div>
    </header>
  );
}
