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

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

function AuthNextButton({
  children,
  style,
  className,
  loading = false,
  loadingText = "در حال ارسال...",
  disabled,
  ...rest
}: TButton) {
  return (
    <button
      className={cn(
        "border dir-ltr p-7 py-2 text-center text-border-secondary-light dark:text-border-secondary-dark border-border-secondary-light dark:border-border-secondary-dark rounded-3xl bg-tertiary-light dark:bg-tertiary-dark font-medium duration-300 hover:opacity-70 text-sm",
        loading && "cursor-wait opacity-70",
        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-current border-t-transparent"
            aria-hidden
          />
          <span>{loadingText}</span>
        </span>
      ) : (
        children
      )}
    </button>
  );
}

export default AuthNextButton;
