import React, { ReactChild } from "react";
import { ViewStyle, StyleSheet, TouchableOpacity, View } from "react-native";

type Props = {
  style: ViewStyle;
  children: ReactChild;
  onPress: () => void;
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
  },
  touchable: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export function FloatingButton(props: Props) {
  return (
    <View style={[styles.container, props.style]}>
      <TouchableOpacity onPress={props.onPress} style={styles.touchable}>
        {props.children}
      </TouchableOpacity>
    </View>
  );
}