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";
import PrivacyButton from "../components/PrivacyButton";

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 className="bg-white p-6 rounded-lg shadow-md">
      <div className="h-56 content-between flex flex-wrap">
        <label className="block text-gray-700 font-medium mb-2" htmlFor="game">
          Juego:
        </label>
        <select
          className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          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 className="mt-4">
        <label
          className="block text-gray-700 font-medium mb-2"
          htmlFor="playersQ"
        >
          Jugadores:
        </label>
        <input
          className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          type="number"
          id="playersQ"
          value={playersQ}
          onChange={(event) => setPlayersQuantity(event.target.value)}
        />
      </div>
      <div className="mt-4">
        <label
          className="block text-gray-700 font-medium mb-2"
          htmlFor="description"
        >
          Descripción:
        </label>
        <textarea
          className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-32"
          id="description"
          value={description}
          onChange={(event) => setDescription(event.target.value)}
        />
      </div>
      <div className="mt-4">
        <label className="block text-gray-700 font-medium mb-2">
          Propiedades:
        </label>
        <div className="flex flex-wrap">
          <div className="mt-4">
            <label className="block text-gray-700 font-medium mb-2">
              Propiedades:
            </label>
            <div className="flex flex-wrap">
              <Checkbox property="property1" handleCheckbox={handleCheckbox} />
              <Checkbox property="property2" handleCheckbox={handleCheckbox} />
              <Checkbox property="property3" handleCheckbox={handleCheckbox} />
              <Checkbox property="property4" handleCheckbox={handleCheckbox} />
            </div>
          </div>
          <div className="flex justify-end mt-6">
            <PrivacyButton />
            <SubmitButton btn_submit_name="Create"/>
          </div>
        </div>
      </div>
    </form>
  );
};

export default NewAlert;