import type { VesselPosition } from '@/types/vessel';
import { getShipKindLabel } from '@components/common/map/VesselLayer';

export function VesselTooltipContent({ vessel: v }: { vessel: VesselPosition }) {
  const speed = v.sog !== undefined ? `${v.sog.toFixed(1)} kn` : '- kn';
  const heading = v.heading ?? v.cog;
  const headingText = heading !== undefined ? `HDG ${Math.round(heading)}°` : 'HDG -';
  const typeText = [getShipKindLabel(v.shipKindCode) ?? v.shipTy ?? '-', v.nationalCode].filter(Boolean).join(' · ');
  return (
    <>
      <div className="text-label-2 font-bold text-fg" style={{ marginBottom: 3 }}>
        {v.shipNm ?? '(이름 없음)'}
      </div>
      <div className="text-caption text-fg-disabled" style={{ marginBottom: 4 }}>
        {typeText}
      </div>
      <div className="flex justify-between text-caption">
        <span className="text-color-accent font-semibold">{speed}</span>
        <span className="text-fg-disabled">{headingText}</span>
      </div>
    </>
  );
}
