import React, { ComponentProps } from "react";
import { cn } from "@/lib/utils";

type TButton = ComponentProps<"button"> & {
  loading?: boolean;
  loadingText?: string;
};

function AuthButton({
  children,
  style,
  className,
  loading = false,
  loadingText = "در حال ارسال...",
  disabled,
  ...rest
}: TButton) {
  return (
    <button
      className={cn(
        "w-full dir-ltr max-w-[290px] p-3 text-center text-white rounded-2xl bg-[#FC8EAC] hover:bg-[#f85e87] font-bold duration-300",
        loading && "cursor-wait opacity-80",
        className
      )}
      style={style}
      disabled={disabled || loading}
      {...rest}
    >
      {loading ? (
        <span className="inline-flex items-center justify-center gap-2">
          <span
            className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
            aria-hidden
          />
          <span>{loadingText}</span>
        </span>
      ) : (
        children
      )}
    </button>
  );
}

export default AuthButton;
