import { router } from "expo-router";
import Button from "./ui/Button";
import { TouchableOpacityProps } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import React from "react";
import { AntDesignIconNames } from "./Icons";

interface Props extends TouchableOpacityProps {
  icon?: AntDesignIconNames;
}

export default React.forwardRef<any, Props>(
  (props, ref): React.ReactElement => {
    const { icon, onPress } = props;
    const defaultOnPress = () => {
      router.back();
    };

    return (
      <Button
        className="h-16 w-16 mb-4"
        onPress={onPress ?? defaultOnPress}
        {...ref}
      >
        <AntDesign name={icon ?? "arrowleft"} size={24} />
      </Button>
    );
  }
);