// 3rd party.
import React from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';

const decorate = compose(
  contempo(`
.hotbar {
  position: absolute;
  width: 200px;
  height: 20px;
  left: 50%;
  top: 2px;
}
.hotbar-inner {
  transform: translateX(-50%);
  height: 100%;
}
.hotbar-slot {
  position: relative;
  box-shadow: -.5px -.5px 0 rgba(0, 0, 0, 1), .5px .5px 0 rgba(0, 0, 0, 1);
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 2px;
  background-color: rgba(255, 255, 255, .2);
}
.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">
      <div className="hotbar-slot">
        <div className="hotbar-key">0</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">1</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">2</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">3</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">4</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">5</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">6</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">7</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">8</div>
      </div>
      <div className="hotbar-slot">
        <div className="hotbar-key">9</div>
      </div>
    </div>
  </div>;
}

export default decorate(HotbarComponent);