'use client';

import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const RING_SIZE: Record<'sm' | 'md', string> = {
  sm: 'h-4 w-4 border-2',
  md: 'h-7 w-7 border-2',
};

/**
 * Loading indicator. `sm`/`md` stay quiet ring spinners for buttons and
 * inline waits; `lg` (the full-page state) is the Atelier breathing mark —
 * a soft pulsing core inside a thin rotating ring band, no niche-specific
 * iconography, plus the visible loading line. Static under
 * prefers-reduced-motion. Keeps `role="status"` and the sm/md/lg `size`
 * contract.
 */
export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
  const t = useTranslations('common');

  if (size === 'lg') {
    return (
      <span
        role="status"
        data-size={size}
        className={cn(
          'flex min-h-[40vh] w-full flex-col items-center justify-center gap-4',
          className
        )}
      >
        <span aria-hidden="true" className="loader-ring">
          <span className="loader-ring-core" />
        </span>
        <span className="loader-text font-display text-muted-foreground text-sm italic">
          {t('loading')}
        </span>
      </span>
    );
  }

  return (
    <span
      role="status"
      data-size={size}
      className={cn('inline-flex items-center justify-center', className)}
    >
      <span
        aria-hidden="true"
        className={cn(
          'spin border-primary/25 border-t-primary inline-block rounded-full',
          RING_SIZE[size]
        )}
      />
      <span className="sr-only">{t('loading')}</span>
    </span>
  );
}