'use client';

/** Map block — thin chat wrapper around `LazyMapContainer` + `MapMarker`. */

import { LazyMapContainer, MapMarker } from '../../../../dev/Map/lazy';
import type { MarkerData } from '../../../../dev/Map/lazy';
import type { MapBlock } from '../../../types/block';
import type { BlockRendererProps } from './types';

export default function MapBlockRenderer({ block, ctx }: BlockRendererProps<MapBlock>) {
  const height = ctx.appearance === 'compact' ? 240 : 380;
  return (
    <div
      className="overflow-hidden rounded-xl border border-border"
      style={{ height }}
    >
      <LazyMapContainer
        initialViewport={{
          longitude: block.center.lng,
          latitude: block.center.lat,
          zoom: block.zoom ?? 11,
        }}
      >
        {block.markers?.map((m) => {
          const marker: MarkerData = {
            id: m.id,
            longitude: m.lng,
            latitude: m.lat,
            data: m.label ? { label: m.label } : undefined,
          };
          return <MapMarker key={m.id} marker={marker} ariaLabel={m.label} />;
        })}
      </LazyMapContainer>
    </div>
  );
}
