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

/**
 * LoadingSpinnerProps - Propriétés du composant LoadingSpinner
 *
 * @interface LoadingSpinnerProps
 */
interface LoadingSpinnerProps {
  /**
   * Taille du spinner
   *
   * - `sm`: Petit (h-4 w-4)
   * - `md`: Moyen (h-8 w-8) - par défaut
   * - `lg`: Grand (h-12 w-12)
   *
   * @default 'md'
   */
  size?: 'sm' | 'md' | 'lg';

  /**
   * Classes CSS personnalisées
   */
  className?: string;

  /**
   * Texte à afficher sous le spinner
   *
   * @example
   * ```tsx
   * <LoadingSpinner text="Chargement en cours..." />
   * ```
   */
  text?: string;
}

/**
 * LoadingSpinner - Composant de spinner de chargement
 *
 * Composant de spinner animé pour indiquer un état de chargement.
 * Inclut un texte optionnel et supporte plusieurs tailles.
 *
 * @example
 * ```tsx
 * // Spinner simple
 * <LoadingSpinner />
 *
 * // Spinner avec texte
 * <LoadingSpinner text="Chargement..." />
 *
 * // Spinner de grande taille
 * <LoadingSpinner size="lg" text="Traitement en cours" />
 * ```
 *
 * @component
 * @param {LoadingSpinnerProps} props - Propriétés du composant
 * @returns {JSX.Element} Spinner animé avec texte optionnel
 */

export function LoadingSpinner({
  size = 'md',
  className,
  text,
}: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-8 w-8',
    lg: 'h-12 w-12',
  };

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center min-h-[200px]',
        className,
      )}
    >
      <div
        className={cn(
          'animate-spin rounded-full border-2 border-kodo-steel border-t-blue-600',
          sizeClasses[size],
        )}
        role="status"
        aria-label="Chargement en cours"
      >
        <span className="sr-only">Chargement...</span>
      </div>
      {text && (
        <p className="mt-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">{text}</p>
      )}
    </div>
  );
}