import * as React from 'react';
import { Loader2Icon } from '@/icons';

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

export interface SpinnerProps extends React.ComponentProps<'svg'> {
  /** Announced to screen readers. Override it to describe what is loading. */
  label?: string;
}

/**
 * Indeterminate loading indicator.
 *
 * Reach for a Skeleton instead when you know the shape of what is arriving —
 * it communicates more and avoids a layout shift on load.
 */
function Spinner({ className, label = 'Loading', ...props }: SpinnerProps) {
  return (
    <Loader2Icon
      data-slot="spinner"
      role="status"
      aria-label={label}
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  );
}

export { Spinner };