import styles from './hotbar.module.css';
import gridStyles from './grid.module.css';

import Grid from './grid.jsx';

/**
 * The hotbar. 10 slots of inventory with an active selection.
 */
export default function Hotbar({
  active,
  hotbarIsHidden,
  onActivate,
  slots,
}) {
  return (
    <div
      className={styles.hotbar}
      style={hotbarIsHidden ? {opacity: 0, top: '-50px'} : {transition: 'opacity 50ms'}}
    >
      <style>{`
        .${styles.hotbar} .${gridStyles.label} {
          text-align: center;
        }
      `}</style>
      <Grid
        active={active}
        color="rgba(02, 02, 57, 0.6)"
        columns={10}
        label={slots[active] && slots[active].label}
        onActivate={onActivate}
        slots={slots}
      />
    </div>
  );
}