import { usePlayer } from '../providers/PlayerProvider';
import styles from '../styles/Army.module.css';

const Army = () => {

  const { army, addUnit } = usePlayer()

  return <div className="styles.armyGathering">
    <div className={`${styles.tavern_keeper} ${styles.person} ${styles.static}`} />
    <div onClick={() => addUnit(0)} className={`${styles.scribe} ${styles.person} ${styles.moloch_denier} ${styles.static}`}>
      <div className={styles.supply}>Moloch denier: {army?.moloch_denier.level}</div>
    </div>
    <div onClick={() => addUnit(1)} className={`${styles.druid} ${styles.person} ${styles.apprentice} ${styles.static}`} >
      <div className={styles.supply}>Apprentice: {army?.apprentice.level}</div>
    </div>
    <div onClick={() => addUnit(2)} className={`${styles.ranger} ${styles.person} ${styles.anointed} ${styles.static}`} >
      <div className={styles.supply}>Anointed: {army?.anointed.level}</div>
    </div>
    <div onClick={() => addUnit(3)} className={`${styles.warrior} ${styles.person} ${styles.champion} ${styles.static}`} >
      <div className={styles.supply}>Champion: {army?.champion.level}</div>
    </div>
  </div>
}

export default Army
