import { h } from 'preact';
import modalStyles from '../PlayerSelectModal.module.css';

interface PlayerSelectModalProps {
  players: string[];
  onSelect: (player: string) => void;
  onClose: () => void;
}

export const PlayerSelectModal = ({ players, onSelect, onClose }: PlayerSelectModalProps) => (
  <div className={modalStyles.modalOverlay} onClick={onClose}>
    <div className={modalStyles.modalContent} onClick={e => e.stopPropagation()}>
      <div className={modalStyles.modalHeader}>
        <h3>Alle Spieler</h3>
        <button className={modalStyles.closeButton} onClick={onClose}>×</button>
      </div>
      <div className={modalStyles.playerList}>
        {players.map(player => (
          <button key={player} className={modalStyles.playerItem} onClick={() => onSelect(player)}>
            {player}
          </button>
        ))}
      </div>
    </div>
  </div>
);