import { Button } from "antd";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import { useAppSelector } from "redux/hooks";

interface BackButtonProps {
  navigateBack?: boolean; // true = use router.back(), false = just clear state
}

export default function BackButton({ navigateBack = true }: BackButtonProps) {
  const handleBack = () => {
    if (navigateBack) window.history.back();
  };
  const { isRTL } = useAppSelector((state) => state.locale);

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