stack/apps/web/src/components/auth/OAuthButton.tsx

"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,
  providerId,
  onClick,
  isLoading = false,
  disabled = false,
}: OAuthButtonProps): ReactElement {
  const accentColor = resolveProviderAccent(providerId);
  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-lg",
        "border border-[#b8c4de] bg-[#f8faff]/90 px-4 py-3 text-sm font-semibold text-[#2f3b52]",
        "transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#56a0ff]/60",
        "hover:border-[#2f80ff] hover:bg-[#dde4f2] hover:text-[#0f141d]",
        "dark:border-[#2f3b52] dark:bg-[#0f141d]/75 dark:text-[#c5d0e6]",
        "dark:hover:border-[#2f80ff] dark:hover:bg-[#232d3f] dark:hover:text-[#eef3ff]",
        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
            aria-hidden="true"
            className="h-2 w-2 rounded-full"
            style={{ backgroundColor: accentColor }}
          />
          <span>Continue with {providerName}</span>
        </>
      )}
    </button>
  );
}

function resolveProviderAccent(providerId: string): string {
  const normalized = providerId.toLowerCase();

  if (normalized.includes("github")) {
    return "#8b5cf6";
  }

  if (normalized.includes("google")) {
    return "#e5484d";
  }

  if (normalized.includes("ldap")) {
    return "#14b8a6";
  }

  return "#2f80ff";
}