import styles from './hotbar.module.css';
import Slot from './slot.jsx';

/**
 * The hotbar. 10 slots of inventory with an active selection.
 */
export default function Hotbar({active, onActivate, slots}) {
  const Slots = slots.map((slot, i) => (
    <div
      className={
        [styles.slotWrapper, active === i && styles.active]
          .filter(Boolean).join(' ')
      }
      onClick={() => onActivate(i)}
      key={i}
    >
      <Slot {...slot} />
    </div>
  ));
  return (
    <div
      className={styles.hotbar}
    >
      {Slots}
    </div>
  );
}