/** ProcessMapPreview — shows the stored map snapshot image. */

import { useProjectStore } from '../../store/projectStore';

interface Props {
  imgData?: string | null;
}

export default function ProcessMapPreview({ imgData: propImgData }: Props) {
  const snapshots = useProjectStore((s) => s.state.map_snapshots_encoded);
  const currentBase = useProjectStore((s) => s.state.current_base);

  const imgData = propImgData ?? snapshots?.[currentBase ?? 'OpenStreetMap']
    ?? (snapshots ? Object.values(snapshots)[0] : null);

  if (!imgData) {
    return (
      <div className="pa-panel">
        <h4 className="pa-panel-title">🗺️ Georeferencing</h4>
        <div className="pa-info-box">Map not available. Lock a map in Data Collection first.</div>
      </div>
    );
  }

  return (
    <div className="pa-panel">
      <h4 className="pa-panel-title">🗺️ Georeferencing</h4>
      <img
        src={`data:image/png;base64,${imgData}`}
        alt="Process map"
        className="pa-map-img"
      />
    </div>
  );
}