src/components/map/RoutePreview.tsx

import React from 'react';
import { StyleSheet } from 'react-native';
import { useTheme, Surface } from 'react-native-paper';
import { LeafletMap } from './LeafletMap';
import type { LatLng } from '../../types/location';

export interface RoutePreviewProps {
  /** Origin coordinate */
  origin: LatLng;
  /** Destination coordinate */
  destination: LatLng;
  /** Height of the preview in dp (default 180) */
  height?: number;
  /** Optional color for the route polyline */
  polylineColor?: string;
}

/**
 * Small, non-interactive map showing a route polyline between two
 * points.  Wrapped in a Surface with rounded corners.
 */
export function RoutePreview({
  origin,
  destination,
  height = 180,
  polylineColor = '#1B6B4D',
}: RoutePreviewProps) {
  const theme = useTheme();

  // Calculate a center point between origin and destination
  const centerLat = (origin.lat + destination.lat) / 2;
  const centerLng = (origin.lng + destination.lng) / 2;

  return (
    <Surface
      style={[
        styles.container,
        {
          height,
          borderRadius: theme.roundness,
          backgroundColor: theme.colors.surfaceVariant,
        },
      ]}
      elevation={1}
    >
      <LeafletMap
        center={{ lat: centerLat, lng: centerLng }}
        zoom={14}
        markers={[
          { lat: origin.lat, lng: origin.lng, type: 'origin', title: 'Origin' },
          {
            lat: destination.lat,
            lng: destination.lng,
            type: 'destination',
            title: 'Destination',
          },
        ]}
        polylines={[
          {
            points: [origin, destination],
            color: polylineColor,
            weight: 5,
          },
        ]}
        interactive={false}
        showCurrentLocation={false}
      />
    </Surface>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
});