Props

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';
import type { GoogleRouteLeg } from 'react-native-maps-routes';

export default function RouteNavigationScreen() {
  const [estimatedTime, setEstimatedTime] = useState<number>(0);
  const [distance, setDistance] = useState<number>(0);
  const [routeLegs, setRouteLegs] = useState<GoogleRouteLeg[]>([]);
  const [error, setError] = useState<string | null>(null);

  const origin = { latitude: 37.7749, longitude: -122.4194 };
  const destination = { latitude: 34.0522, longitude: -118.2437 };
  const waypoints = [
    { latitude: 36.7783, longitude: -119.4179 },
  ];

  const formatTime = (ms: number) => {
    const hours = Math.floor(ms / 3600000);
    const minutes = Math.floor((ms % 3600000) / 60000);
    return `${hours}h ${minutes}m`;
  };

  const formatDistance = (meters: number) => {
    const km = (meters / 1000).toFixed(1);
    return `${km} km`;
  };

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 36.1699,
          longitude: -115.1398,
          latitudeDelta: 5,
          longitudeDelta: 5,
        }}
      >
        <Marker coordinate={origin} title="Start" />
        <Marker coordinate={destination} title="End" />
        
        <MapViewRoute
          origin={origin}
          destination={destination}
          waypoints={waypoints}
          apiKey="YOUR_GOOGLE_MAPS_API_KEY"
          mode="DRIVE"
          strokeColor="#0066FF"
          strokeWidth={4}
          lineJoin="round"
          lineCap="round"
          routeModifiers={{
            avoidTolls: true,
            avoidHighways: false,
          }}
          enableEstimatedTime
          enableDistance
          legFields={[
            "distanceMeters",
            "duration",
            "startLocation",
            "endLocation"
          ]}
          legStepFields={[
            "navigationInstruction",
            "distanceMeters",
          ]}
          onReady={(coords) => {
            console.log('Route loaded with', coords.length, 'points');
          }}
          onError={(err) => {
            setError(err.message);
            console.error('Route error:', err);
          }}
          onEstimatedTime={setEstimatedTime}
          onDistance={setDistance}
          onLegs={setRouteLegs}
          requestBodyOverrides={{
            routingPreference: "TRAFFIC_AWARE",
            languageCode: "en-US",
          }}
        />
      </MapView>
      
      <View style={styles.infoPanel}>
        {error ? (
          <Text style={styles.error}>Error: {error}</Text>
        ) : (
          <>
            <Text style={styles.infoText}>
              Time: {formatTime(estimatedTime)}
            </Text>
            <Text style={styles.infoText}>
              Distance: {formatDistance(distance)}
            </Text>
            <Text style={styles.infoText}>
              Legs: {routeLegs.length}
            </Text>
          </>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  infoPanel: {
    position: 'absolute',
    top: 50,
    left: 20,
    right: 20,
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  infoText: {
    fontSize: 16,
    marginBottom: 5,
  },
  error: {
    fontSize: 14,
    color: 'red',
  },
});