import { Plus, SettingConfig, Switch } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
import { ToolButton } from "../window/ToolButton";
import useToolStore from "@/store/tool";

const LaunchOption = () => {
  const { launchOptions, setLaunchOption, launchIndex, setLaunchIndex } = useToolStore()

  return (
    <Card>
      <CardHeader>
        <CardIcon>
          <SettingConfig /> 启动选项
        </CardIcon>
        <CardTool>
          <ToolButton onClick={() => setLaunchIndex(0)}>1</ToolButton>
          <ToolButton onClick={() => setLaunchIndex(1)}>2</ToolButton>
          <ToolButton onClick={() => setLaunchIndex(2)}>3</ToolButton>
          <ToolButton>
            <Plus />
            添加
          </ToolButton>
          <ToolButton>
            <Switch />
            切换模式
          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>
        <textarea
          placeholder="请输入启动选项"
          value={launchOptions[launchIndex]}
          onChange={(e) => setLaunchOption(e.target.value, launchIndex)}
          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
        />
      </CardBody>
    </Card>
  );
};

export default LaunchOption;
