import React, { useRef } from 'react';
import { SafeAreaView, StyleSheet, Button, View } from 'react-native';
import { MapView, Marker } from '@lynkedup/map-sdk';
import type { MapHandle } from '@lynkedup/map-sdk';

export default function App() {
    const mapRef = useRef<MapHandle | null>(null);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.controls}>
                <Button
                    title="Fly to SF"
                    onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })}
                />
                <Button
                    title="Fit Bounds"
                    onPress={() =>
                        mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 })
                    }
                />
            </View>
            <MapView
                ref={mapRef}
                style={styles.map}
                initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
            >
                <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
            </MapView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1 },
    controls: { position: 'absolute', top: 40, left: 10, right: 10, zIndex: 1000, flexDirection: 'row', justifyContent: 'space-between' },
    map: { flex: 1 }
});