"use client";

import { ArrowLeft, ArrowRight } from "lucide-react";
import { useRouter } from "next/navigation";
import classNames from "classnames";

interface AuthBackButtonProps {
  fallbackHref: string;
  isAr?: boolean;
  className?: string;
}

export default function AuthBackButton({
  fallbackHref,
  isAr = false,
  className,
}: AuthBackButtonProps) {
  const router = useRouter();
  const ArrowIcon = isAr ? ArrowRight : ArrowLeft;

  const handleBack = () => {
    if (typeof window !== "undefined" && window.history.length > 1) {
      router.back();
      return;
    }

    router.push(fallbackHref);
  };

  return (
    <button
      type="button"
      onClick={handleBack}
      className={classNames(
        "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/80 px-4 py-2 text-sm font-medium text-slate-700 shadow-sm backdrop-blur transition-colors hover:border-[#0F9972]/30 hover:text-[#0F9972]",
        className,
      )}
    >
      <ArrowIcon className="h-4 w-4" />
      <span>{isAr ? "العودة" : "Back"}</span>
    </button>
  );
}