import type { SteamUser } from "../types";

interface UserInfoProps {
  user: SteamUser | null;
  onLogin: () => void;
  onLogout: () => void;
}

export default function UserInfo({ user, onLogin, onLogout }: UserInfoProps) {
  return (
    <div className="flex justify-end mb-4">
      {user ? (
        <div className="flex bg-black dark:bg-gray-700 px-4 py-2 rounded-lg items-center gap-3 w-fit">
          <img
            src={user.avatar}
            alt={user.displayName}
            className="w-10 h-10 rounded-sm flex-shrink-0"
          />
          <div className="min-w-0">
            <div className="text-sm font-medium text-white truncate">
              {user.displayName}
            </div>
            <button
              onClick={onLogout}
              className="text-xs text-gray-400 hover:text-gray-200"
            >
              Logout
            </button>
          </div>
        </div>
      ) : (
        <button
          onClick={onLogin}
          className="flex items-center space-x-2 bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
        >
          <span>🔗</span>
          <span>Sign in with Steam</span>
        </button>
      )}
    </div>
  );
}
