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 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
        variant === 'primary'
          ? 'bg-kodo-cyan text-white hover:bg-kodo-cyan focus:ring-blue-500 dark:bg-kodo-cyan dark:hover:bg-kodo-cyan'
          : 'bg-kodo-slate text-kodo-text-main hover:bg-kodo-slate focus:ring-gray-500 dark:bg-kodo-steel dark:text-kodo-text-main dark:hover:bg-kodo-steel',
        (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>
  );
}
