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

const Army = () => {
  const { army, addUnit, isRegistered } = usePlayer()
  return <div className="styles.armyGathering">
    <div className={`${styles.tavern_keeper} ${styles.person} ${styles.static}`} />
    {isRegistered && <>
      <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