MultiRoombaRover/webui/src/spectate/SpectatorApp/components/RoverSpectatorCard.jsx

// Single rover spectator card containing live/snapshot tile and HUD.
import VideoTile from '../../../components/VideoTile.jsx';
import { formatDriverLabel } from '../utils.js';

export default function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, snapshotFeed, audioInfo, session }) {
  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
  return (
    <article className="min-h-[16rem] rounded bg-zinc-900 p-0 sm:min-h-[18rem]">
      <div className="min-h-0 overflow-hidden rounded bg-black/20">
        <VideoTile
          sessionInfo={sessionInfo}
          videoMode={videoMode}
          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={rover.name}
          roverColor={rover.color || null}
          telemetryFrame={frame}
          batteryConfig={rover.battery}
          hudVariant="spectator"
          driverLabel={driverLabel}
          hudForceMap
          hudMapPosition="top-center"
        />
      </div>
    </article>
  );
}