import type { ReactNode } from "react";
import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
import { colors } from "@/lib/theme";

type Region = {
  latitude: number;
  longitude: number;
  latitudeDelta: number;
  longitudeDelta: number;
};

type MapProps = {
  style?: StyleProp<ViewStyle>;
  initialRegion?: Region;
  children?: ReactNode;
};

export default function MapView({ style, children }: MapProps) {
  return (
    <View style={[styles.wrap, style]}>
      <Text style={styles.title}>Map preview</Text>
      <Text style={styles.sub}>Live maps are available on iOS and Android.</Text>
      {children}
    </View>
  );
}

type MarkerProps = {
  coordinate: { latitude: number; longitude: number };
  title?: string;
  description?: string;
  pinColor?: string;
};

export function Marker({ title, description }: MarkerProps) {
  return (
    <View style={styles.marker}>
      <Text style={styles.markerTitle}>{title ?? "Pin"}</Text>
      {description ? <Text style={styles.sub}>{description}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    backgroundColor: "#E8EDF2",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    padding: 24,
  },
  title: { fontSize: 16, fontWeight: "800", color: colors.ink },
  sub: { fontSize: 13, color: colors.muted, textAlign: "center" },
  marker: {
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: "#fff",
    borderRadius: 8,
  },
  markerTitle: { fontWeight: "700", color: colors.ink },
});