import { LogOut } from "lucide-react";

interface UserHeaderProps {
  /** 用户昵称（来自 session） */
  nickname: string;
  /** 用户 ID（来自 session） */
  userId: string;
  onLogout?: () => void;
}

export default function UserHeader({
  nickname,
  userId,
  onLogout,
}: UserHeaderProps) {
  const initial = nickname.charAt(0).toUpperCase();

  return (
    <div className="flex items-center gap-4">
      {/* 头像 */}
      <div className="flex-shrink-0">
        <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden border-2 border-purple-500/60 shadow-[0_0_16px_rgba(139,92,246,0.4)]">
          <div
            className="w-full h-full flex items-center justify-center font-logo text-2xl text-white"
            style={{
              background:
                "linear-gradient(135deg, #6d28d9 0%, #8b5cf6 60%, #a78bfa 100%)",
            }}
          >
            {initial}
          </div>
        </div>
      </div>

      <div className="flex-1 min-w-0">
        <div className="text-lg sm:text-xl font-bold text-white truncate">
          {nickname}
        </div>
        <div className="text-xs text-white/55 mt-1.5">ID: {userId}</div>
      </div>

      {/* 退出登录 · 粉色危险态描边（移动端 = icon-only 圆按钮，桌面端 = 带文案胶囊） */}
      {onLogout && (
        <button
          type="button"
          onClick={onLogout}
          aria-label="退出登录"
          className="inline-flex items-center justify-center gap-1.5 h-9 rounded-full bg-transparent border border-pink-500/40 text-pink-300 hover:bg-pink-500/[0.08] hover:text-pink-200 hover:border-pink-500/60 text-xs transition-colors w-9 sm:w-auto sm:px-3"
        >
          <LogOut size={12} />
          <span className="hidden sm:inline">退出登录</span>
        </button>
      )}
    </div>
  );
}
