"use client";

import type { ReactElement } from "react";
import { Loader2 } from "lucide-react";

export interface OAuthButtonProps {
  providerName: string;
  providerId: string;
  onClick: () => void;
  isLoading?: boolean;
  disabled?: boolean;
}

export function OAuthButton({
  providerName,
  onClick,
  isLoading = false,
  disabled = false,
}: OAuthButtonProps): ReactElement {
  const isDisabled = disabled || isLoading;

  return (
    <button
      type="button"
      role="button"
      onClick={onClick}
      disabled={isDisabled}
      aria-label={isLoading ? "Connecting" : `Continue with ${providerName}`}
      className={[
        "w-full inline-flex items-center justify-center gap-2",
        "rounded-md px-4 py-2 text-base font-medium",
        "bg-blue-600 text-white hover:bg-blue-700",
        "transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",
        isDisabled ? "opacity-50 pointer-events-none" : "",
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {isLoading ? (
        <>
          <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
          <span>Connecting...</span>
        </>
      ) : (
        <span>Continue with {providerName}</span>
      )}
    </button>
  );
}