import { Button } from "antd";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "redux/hooks";

interface BackButtonProps {
  customRoute?: string;
}

export default function BackButton({ customRoute }: BackButtonProps) {
  const router = useNavigate();
  const handleBack = () => {
    if (customRoute) {
      router(customRoute);
    } else {
      router(-1);
    }
  };
  const { isRTL } = useAppSelector((state) => state.locale);

  return (
    <Button
      style={{
        width: 32,
        height: 32,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 0,
        borderRadius: "50%",
        border: "none",
      }}
      icon={
        <div
          style={{
            position: "relative",
            top: 2.5,
            [isRTL ? "left" : "right"]: 1,
          }}
        >
          {isRTL ? <NextIcon /> : <BackIcon />}
        </div>
      }
      onClick={handleBack}
    />
  );
}