import type { SocialButtonsProps, SocialProvider } from './types.js';

const PROVIDER_LABELS: Record<SocialProvider, string> = {
  google: 'Google',
  microsoft: 'Microsoft',
  apple: 'Apple',
};

/**
 * Renders social login buttons for the configured providers.
 * Styled via CSS custom properties (inherits --bl-* from host app).
 */
export function SocialButtons({
  providers,
  onSelect,
  disabled = false,
  className,
}: SocialButtonsProps) {
  return (
    <div
      className={className}
      style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
      data-testid="bl-social-buttons"
    >
      {providers.map(provider => (
        <button
          key={provider}
          type="button"
          onClick={() => onSelect(provider)}
          disabled={disabled}
          data-testid={`bl-social-${provider}`}
          style={{
            padding: '10px 16px',
            border: '1px solid var(--bl-border, #ccc)',
            borderRadius: 'var(--bl-radius, 6px)',
            background: 'var(--bl-surface, #fff)',
            color: 'var(--bl-text, #333)',
            cursor: disabled ? 'not-allowed' : 'pointer',
            fontSize: '14px',
            opacity: disabled ? 0.6 : 1,
          }}
        >
          Continue with {PROVIDER_LABELS[provider]}
        </button>
      ))}
    </div>
  );
}