"use client";

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

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

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

  return (
    <button
      className={cn(
        "dir-ltr w-full max-w-[290px] p-3 text-center",
        btnPrimary,
        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>{resolvedLoadingText}</span>
        </span>
      ) : (
        children
      )}
    </button>
  );
}

export default AuthButton;
