import { Pause, Play, RotateCcw, StepForward } from 'lucide-react';
import { Button, IconButton, Select } from '../../components/ui';
export function SimulationControls({
  paused,
  ready,
  speed,
  loading,
  externalControl = false,
  onTogglePause,
  onStep,
  onReset,
  onSpeed,
}: {
  paused: boolean;
  ready: boolean;
  speed: number;
  loading: boolean;
  externalControl?: boolean;
  onTogglePause: () => void;
  onStep: () => void;
  onReset: () => void;
  onSpeed: (speed: number) => void;
}) {
  return (
    <div aria-label="仿真控制" className="flex flex-wrap items-center justify-center gap-1">
      <Button
        variant="ghost"
        onClick={onTogglePause}
        disabled={!ready}
        aria-label={paused ? '▶ 播放' : '⏸ 暂停'}
        icon={paused ? <Play className="h-3.5 w-3.5" /> : <Pause className="h-3.5 w-3.5" />}
      >
        {paused ? '播放' : '暂停'}
      </Button>
      <IconButton
        tooltip="单步（暂停时可用）"
        aria-label="单步"
        onClick={onStep}
        disabled={!ready || !paused || externalControl}
      >
        <StepForward className="h-3.5 w-3.5" />
      </IconButton>
      <IconButton
        tooltip="重置仿真（R；地图编辑时 R 为缩放）"
        aria-label="重置"
        onClick={onReset}
        disabled={!ready}
      >
        <RotateCcw className="h-3.5 w-3.5" />
      </IconButton>
      <Select
        aria-label="仿真速度"
        value={speed}
        disabled={loading || externalControl}
        onChange={(event) => onSpeed(Number(event.target.value))}
        className="w-[70px]"
      >
        <option value={0.25}>0.25×</option>
        <option value={0.5}>0.5×</option>
        <option value={1}>1×</option>
        <option value={2}>2×</option>
        <option value={4}>4×</option>
      </Select>
    </div>
  );
}