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

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

  return (
    <>
    { array.length > 0 && 
      <div className="Stack">
      { React.Children.map(array, i => (
        <div className="Resource"
          data-type={type}
          disabled={disabled}
          onClick={onClick ? onClick : click}
          style={{backgroundImage:`url(${assetsPath}/gfx/card-${type}.png)`}}>
        </div>
      )) }
    </div>
    }
    </>
  );
};

export default Resource;