/**
 * 선박 호버 툴팁 컴포넌트
 * 마우스 위치 기준으로 선박 정보 표시
 */
import { SHIP_KIND_LABELS, SPEED_THRESHOLD } from '../../types/constants';
import './ShipTooltip.scss';

const OFFSET_X = 12;
const OFFSET_Y = -40;

export default function ShipTooltip({ ship, x, y }) {
  if (!ship) return null;

  const kindLabel = SHIP_KIND_LABELS[ship.signalKindCode] || '기타';
  const sog = Number(ship.sog) || 0;
  const cog = Number(ship.cog) || 0;
  const isMoving = sog > SPEED_THRESHOLD;

  return (
    <div
      className="ship-tooltip"
      style={{
        left: x + OFFSET_X,
        top: y + OFFSET_Y,
      }}
    >
      <div className="ship-tooltip__header">
        <span className="ship-tooltip__kind">{kindLabel}</span>
        <span className="ship-tooltip__name">{ship.shipName || ship.targetId || '-'}</span>
      </div>
      <div className="ship-tooltip__body">
        <span>{sog.toFixed(1)} kn</span>
        <span className="ship-tooltip__sep">|</span>
        <span>{cog.toFixed(1)}&deg;</span>
        <span className="ship-tooltip__sep">|</span>
        <span>{isMoving ? '항해' : '정박'}</span>
      </div>
    </div>
  );
}
