import type { PlayerMap } from '@/lib/map';
import { MapCanvas, type CanvasToken } from '@/features/world/map/MapCanvas';

/** Read-only render of a player-facing map projection + its image. */
export function PlayerMapView({ map, image, images, viewportHeight }: {
  map: PlayerMap;
  image?: string | undefined;
  images?: Record<string, string> | undefined;
  viewportHeight?: string | undefined;
}) {
  const tokens: CanvasToken[] = map.tokens.map((t) => {
    const icon = t.imageId ? images?.[t.imageId] : undefined;
    return {
      id: t.id, label: t.label, color: t.color, col: t.col, row: t.row,
      size: t.size, kind: t.kind, hp: t.hp, conditions: t.conditions,
      ...(icon ? { image: icon } : {}),
    };
  });
  return (
    <MapCanvas
      readOnly
      playerFog
      {...(viewportHeight !== undefined ? { viewportHeight } : {})}
      view={{ image, gridSize: map.gridSize, showGrid: map.showGrid, fogEnabled: map.fogEnabled, revealed: map.revealed, tokens, drawings: map.drawings }}
    />
  );
}
