import { ExportComponent } from './export';
import { useMarkers } from './hooks/useMarkers';
import { MapComponent } from './map';
import { MarkersComponent } from './markers';
import { TotalComponent } from './total';

import './style.css';

export const RoutePlanner = () => {
    const [markers, { reorderMarkers, addMarker }] = useMarkers();

    return (
        <section class="route-planner">
            <section class="header">
                <h2>Route builder</h2>
            </section>
            <section class="markers">
                <MarkersComponent
                    onMarkersReorder={reorderMarkers}
                    markers={markers}
                />
            </section>
            <section class="total">
                <TotalComponent markers={markers} />
            </section>
            <section class="export">
                <ExportComponent markers={markers} />
            </section>
            <section class="map">
                <MapComponent onMapClick={addMarker} markers={markers} />
            </section>
        </section>
    );
};
