// 3rd party.
import React from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import ItemSlot from './item-slot';

const decorate = compose(
  contempo(`
.hotbar {
  position: absolute;
  width: 200px;
  height: 20px;
  left: 50%;
  top: 2px;
}
.hotbar-inner {
  transform: translateX(-50%);
  height: 100%;
}
.hotbar-key {
  color: white;
  text-shadow: 0.25px 0.25px 0 black;
  font-family: monospace;
  position: absolute;
  top: -0.5px;
  left: 0.5px;
  font-size: 3px;
  line-height: 4px;
}
  `),
);

const HotbarComponent = ({damageProton}) => {
  return <div className="hotbar unselectable">
    <div className="hotbar-inner">
      <ItemSlot>
        <div className="hotbar-key">0</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">1</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">2</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">3</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">4</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">5</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">6</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">7</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">8</div>
      </ItemSlot>
      <ItemSlot>
        <div className="hotbar-key">9</div>
      </ItemSlot>
    </div>
  </div>;
}

export default decorate(HotbarComponent);