'use client';

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

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

/**
 * DESIGN ME — loading indicator used by every page and async button. Bare
 * text placeholder; replace with your own spinner/skeleton. Keep the
 * `role="status"` + sr-only label, and keep the `size` prop (callers across
 * the app pass sm/md/lg).
 *
 * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
 */
export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
  const t = useTranslations('common');
  return (
    <span role="status" data-size={size} className={cn(className)}>
      <span aria-hidden="true">…</span>
      <span className="sr-only">{t('loading')}</span>
    </span>
  );
}