import { TouchableOpacity, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";

export const FloatingBackButton = () => {
  if (!router.canGoBack()) {
    return null;
  }
  const handleBack = () => {
    router.back();
  };
  return (
    <TouchableOpacity style={styles.back_button} onPress={handleBack}>
      <Ionicons name="arrow-back-outline" size={30} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  back_button: {
    position: "absolute",
    top: 15,
    left: 10,
    height: 40,
    width: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 25,
    backgroundColor: "white",
    borderWidth: 2,
    elevation: 5,
    zIndex: 1,
  },
});
