Untitled

import React, { useState } from "react";
import GameSelector from "../components/GameSelector";
import SubmitButton from "../components/SubmitButton";
import PlayerQuantity from "../components/PlayerQuantity";
import TextArea from "../components/TextArea";
import Checkbox from "../components/Checkbox";

const NewAlert = () => {
  const [selectedGame, setSelectedGame] = useState("");
  const [playersQ, setPlayersQuantity] = useState("");
  const [description, setDescription] = useState("");
  const [properties, setProperties] = useState([]);

  const handleCheckbox = (property) => {
    if (properties.includes(property)) {
      setProperties(properties.filter((p) => p !== property));
    } else {
      setProperties([...properties, property]);
    }
  };

  return (
    <form>
      <div>
        <label htmlFor="game">Juego:</label>
        <select
          id="game"
          value={selectedGame}
          onChange={(event) => setSelectedGame(event.target.value)}
        >
          <option value="">Seleccione un juego</option>
          <option value="juego1">Juego 1</option>
          <option value="juego2">Juego 2</option>
        </select>
      </div>
      <div>
        <label htmlFor="playersQ">Jugadores:</label>
        <input
          type="number"
          id="playersQ"
          value={playersQ}
          onChange={(event) => setPlayersQuantity(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="description">Descripción:</label>
        <textarea
          id="description"
          value={description}
          onChange={(event) => setDescription(event.target.value)}
        />
      </div>
      <div>
        <input
          type="checkbox"
          id="property1"
          value="property1"
          onChange={() => handleCheckbox("property1")}
        />
        <label htmlFor="property1">Propiedad 1</label>
      </div>
      <div>
        <input
          type="checkbox"
          id="property2"
          value="property2"
          onChange={() => handleCheckbox("property2")}
        />
        <label htmlFor="property2">Propiedad 2</label>
      </div>
      <SubmitButton
        btn_submit_name="Crear Alerta"
        game={selectedGame}
        players={playersQ}
        desc={description}
        properties={properties}
      />
    </form>
  );
};

export default NewAlert;