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

interface Props extends ButtonProps {
  icon?: AntDesignIconNames;
}

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

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