import React from 'react';
import Mech from '../../Mech';
import { isEmptySlot } from '../../MechUtils'

type MemberProps = {
    mech: Mech;
    remover: () => void;
};

function Member({mech, remover} : MemberProps) {
    return (
        <div className='mech-member'>
            <h3>{mech.name}</h3>
            <div className='mech-description'>
                <img src={mech.img} alt='Mech picture' />
                <ul className='mech-stats'>
                    <li>Class : {mech.kind}</li>
                    <li>Health : {mech.health}</li>
                    <li>Move range : {mech.move}</li>
                    <li>From : {mech.squad}</li>
                </ul>
            </div>
            <button onClick={event => remover()} disabled={isEmptySlot(mech)}>Remove</button>
        </div>
    )
}

export default Member;