veza/apps/web/src/features/auth/components/AuthButton.tsx

import React from 'react';
import { cn } from '@/lib/utils';

interface AuthButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  loading?: boolean;
  variant?: 'primary' | 'secondary';
}

export function AuthButton({
  loading,
  variant = 'primary',
  className,
  children,
  disabled,
  ...props
}: AuthButtonProps) {
  return (
    <button
      className={cn(
        'w-full px-4 py-2.5 rounded-xl font-medium transition-all duration-[var(--sumi-duration-slow)] ease-in-out focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background',
        variant === 'primary'
          ? 'bg-primary text-primary-foreground hover:opacity-90 shadow-sm'
          : 'bg-muted text-foreground hover:bg-muted/80 border border-border',
        (disabled || loading) && 'opacity-50 cursor-not-allowed',
        className,
      )}
      disabled={disabled || loading}
      aria-busy={loading}
      aria-disabled={disabled || loading ? 'true' : 'false'}
      {...props}
    >
      {loading ? (
        <>
          <span className="sr-only">Chargement en cours</span>
          <span aria-hidden="true">Chargement...</span>
        </>
      ) : (
        children
      )}
    </button>
  );
}