import { observer } from 'mobx-react-lite';
import type { ResourceDrop } from '../game/types';
import { LOG_SPRITE, MEAT_SPRITE, TWIG_SPRITE } from '../game/sprites';
import PixelSprite from './PixelSprite';

const DROP_SPRITES = { log: LOG_SPRITE, twig: TWIG_SPRITE, meat: MEAT_SPRITE };
const DROP_SIZES = { log: 20, twig: 18, meat: 18 };

const ResourceDropEntity = observer(function ResourceDropEntity({ drop }: { drop: ResourceDrop }) {
  return (
    <div>
      <div className={`entity ${drop.resource}-shadow`} style={{ left: drop.x, top: drop.y }} />
      <div
        className={`entity ${drop.resource}`}
        style={{ left: drop.x, top: drop.y - drop.z, zIndex: Math.floor(drop.y - drop.z) }}
      >
        <PixelSprite pixels={DROP_SPRITES[drop.resource]} size={DROP_SIZES[drop.resource]} />
      </div>
    </div>
  );
});

export default ResourceDropEntity;