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

import Grid from './grid.jsx';

/**
 * Inventory bag. 10-40 slots of inventory.
 */
export default function Bag({
  isInventoryOpen,
  onActivate,
  slots,
}) {
  return (
    <div
      className={styles.bag}
      style={isInventoryOpen ? {transition: 'opacity 50ms'} : {opacity: 0, left: '-440px'}}
    >
      <Grid
        color="rgba(02, 02, 28, 0.6)"
        columns={10}
        label="Bag"
        onActivate={onActivate}
        slots={slots}
      />
    </div>
  );
}