'use client'
import StatusDot from '../StatusDot';
import Switch from '../Switch';
import { WsStatus } from './lib/types';

export default function RadarHeader({
  useAvatars, setUseAvatars, radarWsStatus,
}: {
  useAvatars: boolean;
  setUseAvatars: (v:boolean)=>void;
  radarWsStatus: WsStatus;
}) {
  return (
    <div className="mb-4 shrink-0 flex items-center">
      <h2 className="text-xl font-semibold flex-1">Live Radar</h2>
      <div className="flex-1 flex justify-center">
        <Switch
          id="radar-avatar-toggle"
          checked={useAvatars}
          onChange={setUseAvatars}
          labelLeft="Icons"
          labelRight="Avatare"
          className="mx-auto"
        />
      </div>
      <div className="flex-1 flex items-center justify-end gap-4">
        <StatusDot status={radarWsStatus} label="Positionsdaten" />
      </div>
    </div>
  );
}