import React, { useState } from 'react';

// Import playersList data
const playersList = [
  // ... List of available players data ...
];

const TeamSelection = () => {
  const [availablePlayers, setAvailablePlayers] = useState(playersList);
  const [selectedPlayers, setSelectedPlayers] = useState([]);
  const [showInstructions, setShowInstructions] = useState(true);

  const handleSelectPlayer = (player) => {
    if (selectedPlayers.length >= 11) {
      alert("You can't select more than 11 players.");
      return;
    }

    setSelectedPlayers((prevSelected) => [...prevSelected, player]);
    setAvailablePlayers((prevAvailable) =>
      prevAvailable.filter((p) => p !== player)
    );
  };

  const handleRemovePlayer = (player) => {
    setSelectedPlayers((prevSelected) =>
      prevSelected.filter((p) => p !== player)
    );
    setAvailablePlayers((prevAvailable) => [...prevAvailable, player]);
  };

  const handleCloseInstructions = () => {
    setShowInstructions(false);
  };

  // Add sorting functionality if needed (name, role, batting, bowling skills)

  return (
    <div>
      {showInstructions && (
        <div>
          {/* Instructions here */}
          <button onClick={handleCloseInstructions}>Close Instructions</button>
        </div>
      )}

      <h1>Available Players</h1>
      <table>
        <thead>
          {/* Table header here */}
        </thead>
        <tbody>
          {availablePlayers.map((player) => (
            <tr key={player.name}>
              {/* Player details here */}
              <td>
                <button
                  onClick={() => handleSelectPlayer(player)}
                  disabled={selectedPlayers.includes(player)}
                >
                  Select
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <h1>Selected Players</h1>
      <table>
        <thead>
          {/* Table header here */}
        </thead>
        <tbody>
          {selectedPlayers.map((player) => (
            <tr key={player.name}>
              {/* Player details here */}
              <td>
                <button onClick={() => handleRemovePlayer(player)}>
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TeamSelection;