import { useTranslation } from 'react-i18next';
import styles from './loading-spinner.module.css';

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

export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
  const { t } = useTranslation();

  return (
    <div
      className={[styles.container, size !== 'md' ? styles[size] : undefined]
        .filter(Boolean)
        .join(' ')}
      role="status"
      aria-label={t('common.loading')}
    >
      <div className={styles.spinner} />
      <span className="sr-only">{t('common.loading')}</span>
    </div>
  );
}
