"use client";

import { Polyline, useMap } from "react-leaflet";
import { useEffect } from "react";
const purpleOptions = { color: "purple" };

const FlyToPolyline = ({ polyline }) => {
    const map = useMap();

    useEffect(() => {
        if (map) {
            const leafletPolyline = L.polyline(polyline); // Create a Leaflet polyline
            const bounds = leafletPolyline.getBounds(); // Get bounds from the polyline
            map.flyToBounds(bounds, { padding: [50, 50] }); // Fly to the polyline bounds
        }
    }, [map, polyline]);

    return <Polyline pathOptions={purpleOptions} positions={polyline} />; // Render the polyline
};

export default FlyToPolyline;