import lock from '../../../../images/login-page/lock.png';
import styles from './ServersTable.module.css';

const ServerListTable = ({ rooms, handleJoinClick, handleDeleteClick }) => {
    const safeRooms = Array.isArray(rooms) ? rooms : [];
    return (
        <table className={styles.rooms}>
            <thead>
                <tr>
                    <th className={styles.firstColumn}></th>
                    <th>Server</th>
                    <th>#/#</th>
                    <th>Status</th>
                    <th className={styles.lastColumn}></th>
                </tr>
            </thead>
            <tbody>
                {safeRooms.map((room, index) => {
                    if (!room) return null;
                    return room.started ? null : (
                        <tr key={index}>
                            <td>{room.private ? <img src={lock} alt='private' /> : null}</td>
                            <td className={styles.roomName}>{room.name}</td>
                            <td>{`${(room.players && room.players.length) || 0}/4`}</td>
                            <td>{room.isStarted ? 'started' : 'waiting'}</td>
                            <td className={styles.lastColumn}>
                                <button onClick={() => handleJoinClick(room)}>Join</button>
                                <button onClick={() => handleDeleteClick(room._id)} className={styles.deleteBtn}>
                                        Delete
                                    </button>
                            </td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
};

export default ServerListTable;