import React from "react";
import "./Resource.css";
import { assetsPath } from './Common.js';

const Resource = ({ type, disabled, count }) => {
  const array = new Array(Number(count ? count : 0));
  const select = (event) => {
    if (!disabled) {
      event.target.classList.toggle('Selected');
    }
  };
  return (
    <>
    { array.length > 0 && 
      <div className="Stack">
      { React.Children.map(array, i => (
        <div className="Resource"
          data-type={type}
          onClick={select}
          style={{backgroundImage:`url(${assetsPath}/gfx/card-${type}.png)`}}>
        </div>
      )) }
    </div>
    }
    </>
  );
};

export default Resource;