const [pickup, setPickup] = useState(null);
  const [destination, setDestination] = useState(null);
  const [error, setError] = useState(null);
  const [totalPrice, setTotalPrice] = useState(0);
  const [directions, setDirections] = useState(null);
  const [map, setMap] = useState(null);
  const [tollCost, setTollCost] = useState(0);
  const origin = { lng: -100.0095504, lat: 26.509672 }; // Updated starting point
  const pricePerKm = 19;

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const userLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          setPickup(userLocation);
          if (map) {
            map.panTo(userLocation);
          }
        },
        (error) => {
          console.error('Error getting user location:', error);
          setError('Error getting user location: ' + error.message);
        }
      );
    } else {
      console.error('Geolocation is not supported by this browser.');
      setError('Geolocation is not supported by this browser.');
    }
  }, [map]);

  const calculateRoute = () => {
    setError(null);
    if (!pickup || !destination) {
      setError('Please fill in all required fields.');
      return;
    }

    const directionsService = new window.google.maps.DirectionsService();
    directionsService.route(
      {
        origin: pickup,
        destination: destination,
        travelMode: window.google.maps.TravelMode.DRIVING,
        waypoints: [{ location: pickup, stopover: true }],
      },
      (result, status) => {
        if (status === window.google.maps.DirectionsStatus.OK) {
          setDirections(result);
          const distanceToDestination = result.routes[0].legs[0].distance.value / 1000; // Distance in kilometers
          setDistance(distanceToDestination);
          const price = calculatePrice(distanceToDestination);
          setTotalPrice(price);
          fetchTollData(pickup, destination);
        } else if (status === window.google.maps.DirectionsStatus.REQUEST_DENIED) {
          setError('Request denied. Please check your API key and permissions.');
          console.error('Request denied:', status, result);
        } else {
          setError('Error calculating the route: ' + status);
          console.error('Error calculating the route:', status, result);
        }
      }
    );
  };

  const calculatePrice = (distance) => {
    return distance * pricePerKm + 558 + tollCost; // Tarifa base de $558 más $19 por kilómetro más el costo de las casetas
  };

  const fetchTollData = async (origin, destination) => {
    try {
      const response = await fetch(`https://api.tollguru.com/v1/calc/route?source=${origin.lat},${origin.lng}&destination=${destination.lat},${destination.lng}`, {
        headers: {
          'x-api-key': process.env.REACT_APP_TOLLGURU_API_KEY,
        },
      });
      const data = await response.json();
      const tolls = data.tollCosts || 0;
      setTollCost(tolls);
    } catch (error) {
      console.error('Error fetching toll data:', error);
      setError('Error fetching toll data: ' + error.message);
    }
  };

  return (
    <Box>
      <Heading as="h1" mb={4}>
        Selecciona recogida y destino
      </Heading>
      {error && <Text color="red.500">Error: {error}</Text>}
      <FormControl mb={4}>
        <FormLabel htmlFor="pickup">Punto de recogida:</FormLabel>
        <Input type="text" id="pickup" value={pickup ? `${pickup.lat}, ${pickup.lng}` : ''} readOnly />
      </FormControl>
      <FormControl mb={4}>
        <FormLabel htmlFor="destination">Destino:</FormLabel>
        <Input type="text" id="destination" value={destination ? `${destination.lat}, ${destination.lng}` : ''} readOnly />
      </FormControl>
      <Button onClick={calculateRoute} colorScheme="blue" disabled={!pickup || !destination}>
        Calcular Ruta
      </Button>
      <Text mt={4} fontSize="xl">
        Precio total: ${totalPrice.toFixed(2)}
      </Text>
      <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY} libraries={['places', 'geometry']}>
        <GoogleMap
          center={{ lat: origin.lat, lng: origin.lng }}
          zoom={7}
          maxZoom={20} // Allow more zoom
          mapContainerStyle={{ height: '400px', width: '100%', marginTop: '20px' }}
          onLoad={(map) => setMap(map)}
          onClick={(event) => {
            try {
              if (!pickup) {
                setPickup(event.latLng.toJSON());
              } else if (!destination) {
                setDestination(event.latLng.toJSON());
              }
            } catch (err) {
              setError('Error setting location: ' + err.message);
              console.error('Error setting location:', err);
            }
          }}
        >
          {pickup && <Marker position={pickup} draggable={true} onDragEnd={(e) => setPickup(e.latLng.toJSON())} />}
          {destination && <Marker position={destination} draggable={true} onDragEnd={(e) => setDestination(e.latLng.toJSON())} />}
          {pickup && destination && (
            <DirectionsService
              options={{
                origin: pickup,
                destination: destination,
                travelMode: window.google.maps.TravelMode.DRIVING,
                waypoints: [{ location: pickup, stopover: true }],
              }}
              callback={(response, status) => {
                if (status === window.google.maps.DirectionsStatus.OK) {
                  setDirections(response);
                } else {
                  setError('Error fetching directions: ' + status);
                  console.error('Error fetching directions:', status, response);
                }
              }}
            />
          )}
          {directions && (
            <DirectionsRenderer
              options={{
                directions: directions,
              }}
            />
          )}
        </GoogleMap>
      </LoadScript>
    </Box>
  );
};

GoogleMapsRoute.propTypes = {
  setDistance: PropTypes.func.isRequired,
};

export default GoogleMapsRoute;

quiero que este codigo see parezca al anterior pero con mapbox : import { useConfiguration } from '../../../../core/configuration/useConfiguration'

import { Button, Form, Input } from 'antd'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import React, { useEffect, useRef, useState } from 'react'
import { BookingApi } from '../../booking.api'

export const BookingForm: React.FC = () => {
  const mapContainer = useRef(null)
  const map = useRef(null)
  const [form] = Form.useForm()
  const { mapboxAccessToken } = useConfiguration()
  const [pickup, setPickup] = useState<[number, number]>([0, 0])
  const [destination, setDestination] = useState<[number, number]>([0, 0])
  const [estimatedCost, setEstimatedCost] = useState<number | null>(null)

  useEffect(() => {
    if (map.current) return
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [0, 0],
      zoom: 2,
      accessToken: mapboxAccessToken,
    })

    map.current.on('load', () => {
      map.current.addSource('route', {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: [],
          },
        },
      })

      map.current.addLayer({
        id: 'route',
        type: 'line',
        source: 'route',
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color': '#888',
          'line-width': 8,
        },
      })
    })
  }, [mapboxAccessToken])

  const onFinish = async () => {
    try {
      const cost = await BookingApi.getEstimatedCost({
        pickup: pickup.join(','),
        destination: destination.join(','),
      })
      setEstimatedCost(cost)
    } catch (error) {
      console.error('Error calculating estimated cost:', error)
    }
  }

  return (
    <Form form={form} onFinish={onFinish}>
      <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
      <Form.Item name="pickup" label="Pickup">
        <Input
          placeholder="Latitude, Longitude"
          onChange={e =>
            setPickup(e.target.value.split(',').map(Number) as [number, number])
          }
        />
      </Form.Item>
      <Form.Item name="destination" label="Destination">
        <Input
          placeholder="Latitude, Longitude"
          onChange={e =>
            setDestination(
              e.target.value.split(',').map(Number) as [number, number],
            )
          }
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Get Estimated Cost
        </Button>
      </Form.Item>
      {estimatedCost !== null && (
        <div>Estimated Cost: ${estimatedCost.toFixed(2)}</div>
      )}
    </Form>
  )
}