import styles from './slot.module.css';

/**
 * An inventory slot. Displays an item image and the quantity of the item if > 1.
 */
export default function Slot({
  icon,
  onClick,
  onDragEnter,
  onDragOver,
  onDragStart,
  onDrop,
  onMouseDown,
  onMouseUp,
  qty = 1,
}) {
  return (
    <button
      className={styles.slot}
      draggable
      onClick={onClick}
      onDragEnter={onDragEnter}
      onDragOver={onDragOver}
      onDragStart={onDragStart}
      onDrop={onDrop}
      onKeyDown={(event) => {
        event.preventDefault();
      }}
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
    >
      <div
        className={styles.slotInner}
        style={icon ? {backgroundImage: `url(${icon})`} : {}}
      >
        {qty > 1 && (
          <span
            className={
              [styles.qty, `q-${Math.round(Math.log10(qty))}`]
                .filter(Boolean).join(' ')
            }
          >
            {qty}
          </span>
        )}
      </div>
    </button>
  );
}