stack/apps/web/src/components/auth/sso-provider-buttons.tsx

import React from 'react';
import type { SsoProviderDiscovery } from '@/lib/sso';

interface SsoProviderButtonsProps {
  providers: SsoProviderDiscovery[];
  loadingProviderId?: string | null;
  onOidcSignIn: (providerId: SsoProviderDiscovery['id']) => void;
}

export function SsoProviderButtons({
  providers,
  loadingProviderId = null,
  onOidcSignIn,
}: SsoProviderButtonsProps): React.ReactElement | null {
  const visibleProviders = providers.filter((provider) => provider.configured);

  if (visibleProviders.length === 0) {
    return null;
  }

  return (
    <div className="mt-6 space-y-3 border-t border-surface-border pt-6">
      <p className="text-sm font-medium text-text-secondary">Single sign-on</p>
      <div className="space-y-3">
        {visibleProviders.map((provider) => {
          if (provider.loginMode === 'saml' && provider.samlFallback.loginUrl) {
            return (
              <a
                key={provider.id}
                href={provider.samlFallback.loginUrl}
                className="flex w-full items-center justify-center rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:border-accent/50 hover:text-accent"
              >
                Continue with {provider.name} (SAML)
              </a>
            );
          }

          return (
            <button
              key={provider.id}
              type="button"
              disabled={loadingProviderId === provider.id}
              onClick={() => onOidcSignIn(provider.id)}
              className="flex w-full items-center justify-center rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:border-accent/50 hover:text-accent disabled:opacity-50"
            >
              {loadingProviderId === provider.id
                ? `Redirecting to ${provider.name}...`
                : `Continue with ${provider.name}`}
            </button>
          );
        })}
      </div>
    </div>
  );
}