import { Loader2 } from 'lucide-react';

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

interface InlineLoaderProps {
  /** Label shown next to the spinner. Default: 'Loading…' */
  label?: string;
  /** Size variant. Default: 'sm' */
  size?: 'sm' | 'md';
  /** Center horizontally inside parent. Default: false */
  centered?: boolean;
  className?: string;
}

/**
 * Inline spinner for in-place async loading (table rows, cards, sidebars).
 * Use instead of a full PageSkeleton when only part of the page is loading.
 *
 * Usage:
 *   {isLoading && <InlineLoader />}
 *   {isLoading && <InlineLoader label="Fetching competitors…" centered />}
 */
export function InlineLoader({ label = 'Loading…', size = 'sm', centered = false, className }: InlineLoaderProps) {
  const iconSize = size === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
  const textSize = size === 'sm' ? 'text-sm' : 'text-base';

  return (
    <div
      role="status"
      aria-live="polite"
      className={cn(
        'flex items-center gap-2 text-muted-foreground',
        centered && 'justify-center',
        className,
      )}
    >
      <Loader2 className={cn(iconSize, 'animate-spin shrink-0')} aria-hidden="true" />
      <span className={textSize}>{label}</span>
    </div>
  );
}