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, maxWidth }: { map: PlayerMap; image?: string | undefined; maxWidth?: number | undefined }) {
  const tokens: CanvasToken[] = map.tokens.map((t) => ({
    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,
  }));
  return (
    <MapCanvas
      readOnly
      playerFog
      {...(maxWidth !== undefined ? { maxWidth } : {})}
      view={{ image, gridSize: map.gridSize, showGrid: map.showGrid, fogEnabled: map.fogEnabled, revealed: map.revealed, tokens, drawings: map.drawings }}
    />
  );
}