import styles from "./PlatformSelector.module.css";

interface Props {
  platforms: string[];
  selected: string[];
  onChange: (selected: string[]) => void;
}

export default function PlatformSelector({ platforms, selected, onChange }: Props) {
  const selectedSet = new Set(selected);

  function toggle(p: string) {
    if (selectedSet.has(p)) {
      onChange(selected.filter((s) => s !== p));
    } else {
      onChange([...selected, p]);
    }
  }

  return (
    <div className={styles.wrapper}>
      <span className={styles.label}>目标平台：</span>
      {platforms.map((p) => (
        <label
          key={p}
          className={`${styles.chip} ${selectedSet.has(p) ? styles.on : ""}`}
        >
          <input
            type="checkbox"
            checked={selectedSet.has(p)}
            onChange={() => toggle(p)}
            className={styles.checkbox}
          />
          {p}
        </label>
      ))}
    </div>
  );
}
