import { observer } from 'mobx-react-lite';
import { formatClock } from '../game/daynight';
import type { GameStore } from '../game/GameStore';
import { COIN_SPRITE, HEART_SPRITE, LOG_SPRITE, MEAT_SPRITE, TWIG_SPRITE } from '../game/sprites';
import PixelSprite from './PixelSprite';

interface Props {
  store: GameStore;
  onExitToMenu: () => void;
}

function Topbar({ store, onExitToMenu }: Props) {
  return (
    <div className="topbar">
      <h1 className="topbar__title">Forest</h1>
      <div className="inventory-slot">
        <span>День {store.day}, {formatClock(store.hour)}</span>
      </div>
      <div className="inventory-slot">
        <PixelSprite pixels={HEART_SPRITE} size={18} />
        <span>{store.characterHp.toFixed(1)}/{store.characterMaxHp}</span>
      </div>
      <div className="spacer" />
      <div className="inventory-slot">
        <PixelSprite pixels={TWIG_SPRITE} size={22} />
        <span>{store.inventory.twigs}</span>
      </div>
      <div className="inventory-slot">
        <PixelSprite pixels={LOG_SPRITE} size={28} />
        <span>{store.inventory.logs}</span>
      </div>
      <div className="inventory-slot">
        <PixelSprite pixels={MEAT_SPRITE} size={22} />
        <span>{store.inventory.meat}</span>
      </div>
      <div className="inventory-slot">
        <PixelSprite pixels={COIN_SPRITE} size={24} />
        <span>{store.inventory.coins.toFixed(1)}</span>
      </div>
      <button type="button" className="exit-menu-btn" onClick={onExitToMenu}>
        Выйти в меню
      </button>
    </div>
  );
}

export default observer(Topbar);