import { useElevation } from '@/hooks/useElevation.ts';

/**
 * Shows cursor coordinates + elevation (meters ASL) at the bottom-left of the map.
 * Uses the Open-Elevation API with debounced requests.
 */
export default function ElevationDisplay() {
  const { elevation, position, loading } = useElevation();

  if (!position) return null;

  return (
    <div
      style={{
        position: 'absolute',
        bottom: '40px',
        left: '10px',
        background: 'rgba(0,0,0,0.8)',
        color: 'white',
        padding: '8px 12px',
        borderRadius: '4px',
        fontSize: '12px',
        zIndex: 1000,
        pointerEvents: 'none',
        lineHeight: 1.6,
        fontFamily: 'monospace',
      }}
    >
      <div>
        {position.lat.toFixed(5)}, {position.lon.toFixed(5)}
      </div>
      <div>
        {loading
          ? 'Elev: ...'
          : elevation !== null
            ? `Elev: ${elevation}m ASL`
            : 'Elev: N/A'}
      </div>
    </div>
  );
}
