import React, { FC } from "react";
import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
import { Ionicons } from "@expo/vector-icons";

type Props = {
  onPress: () => void;
  top: number;
  mapSwitch: "flex" | "none";
};

export const MapsButton: FC<Props> = ({ onPress, top, mapSwitch }) => {
  const styles: TouchableOpacityProps["style"] = {
    position: "absolute",
    top,
    left: 10,
    width: 50,
    height: 50,
    backgroundColor: "#0099CC",
    borderColor: "white",
    borderStyle: "solid",
    borderWidth: 1,
    borderRadius: 50,
    alignContent: "center",
    alignSelf: "center",
    alignItems: "center",
    display: mapSwitch,
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles}>
      <View style={{ flex: 1 }} />
      <Ionicons name="close" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};