import { getRadarPosition, getEntityTranslate } from "../utilities/utilities";

const Bomb = ({ bombData, mapData, imgSize, localTeam, averageLatency, settings }) => {
  // Don't render with empty/invalid data (e.g. new round, stale cache cleared)
  if (!bombData || bombData.x === undefined || bombData.y === undefined) return null;

  const radarPosition = getRadarPosition(mapData, bombData);

  const mapW = imgSize?.w || 0;
  const mapH = imgSize?.h || 0;

  // Calculate bomb size based on settings
  const baseSize = 1.5; // Base size in vw
  const scaledSize = baseSize * (settings?.bombSize ?? 1);
  const bombPx = scaledSize * (imgSize?.w || 1024) / 100;

  // Use getEntityTranslate to calculate pixel position (same as original repo)
  const { x: rawX, y: rawY } = getEntityTranslate(mapW, mapH, radarPosition, bombPx, bombPx);

  // Apply letterbox offset (ml/mt) to align with map image origin
  const x = rawX + (imgSize?.ml || 0);
  const y = rawY + (imgSize?.mt || 0);

  return (
    <div
      className={`absolute origin-center rounded-[100%] left-0 top-0`}
      style={{
        width: `${bombPx}px`,
        height: `${bombPx}px`,
        transform: `translate(${x}px, ${y}px)`,
        transition: `transform ${averageLatency}ms linear`,
        backgroundColor: `${
          (bombData.m_is_defused && `#50904c`) ||
          `#c90b0b`
        }`,
        WebkitMask: `url('./assets/icons/c4_sml.png') no-repeat center / contain`,
        opacity: `1`,
        zIndex: `250`,
      }}
    />
  );
};

export default Bomb;
