"use client";

import React, { ComponentProps } from "react";
import { cn } from "@/lib/utils";
import { btnDefault, btnPrimary } from "@/lib/ui/buttonStyles";
import { useTranslation } from "react-i18next";

type ButtonVariant = "default" | "primary";

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

function AuthNextButton({
  children,
  style,
  className,
  loading = false,
  loadingText,
  disabled,
  variant = "default",
  ...rest
}: TButton) {
  const { t } = useTranslation("common");
  const resolvedLoadingText = loadingText ?? t("auth.loading");

  return (
    <button
      className={cn(
        "dir-ltr px-4 py-2 text-center text-sm font-semibold",
        variant === "primary" ? btnPrimary : btnDefault,
        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>{resolvedLoadingText}</span>
        </span>
      ) : (
        children
      )}
    </button>
  );
}

export default AuthNextButton;
