import { CirclePause, CirclePlay } from 'lucide-react';
import { useAppStore } from '../../stores/useAppStore';
import { Badge } from '../../components/ui';
import { StoreStatusBar } from './StatusBar';

export function ViewportHUD() {
  const paused = useAppStore((state) => state.paused);
  const ready = useAppStore((state) => Boolean(state.snapshot));
  return (
    <div
      aria-label="视口状态"
      className="engineering-glass flex flex-wrap items-center gap-2 rounded-lg border border-border px-2 py-1 text-xs"
    >
      <Badge tone={!ready || paused ? 'neutral' : 'success'}>
        <span aria-hidden="true" className="hud-signal" data-running={ready && !paused} />
        {!ready || paused ? (
          <CirclePause className="h-3.5 w-3.5" />
        ) : (
          <CirclePlay className="h-3.5 w-3.5" />
        )}
        {!ready ? '待导入' : paused ? '已暂停' : '仿真中'}
      </Badge>
      <StoreStatusBar />
    </div>
  );
}