import { FoxSpinner } from '@/@fox/core/components/fox-spinner';
import styles from './spinner.module.scss';

type SpinnerSize = 'sm' | 'md' | 'lg';
type SpinnerTone = 'primary' | 'inverse' | 'muted';

/** 시안에 크기 축이 없어 이 앱이 쓰던 세 단계를 그대로 유지한다. */
const SIZE_PX: Record<SpinnerSize, number> = {
  sm: 16,
  md: 24,
  lg: 32,
};

const TONE_CLASS: Record<SpinnerTone, string> = {
  primary: styles.primary,
  inverse: styles.inverse,
  muted: styles.muted,
};

interface SpinnerProps {
  size?: SpinnerSize;
  tone?: SpinnerTone;
  /** 스크린리더 전용 안내 문구. 기본 '불러오는 중'. */
  label?: string;
}

/**
 * 로딩 인디케이터. 상태 없는 프레젠테이션 컴포넌트 — 표시 여부는 호출부 책임.
 *
 * 모양은 디자인 시스템의 `FoxSpinner`가 갖는다. 이 껍데기는 앱이 쓰던 size·tone 축을
 * 그대로 유지해 호출부를 건드리지 않으려고 남겨 둔다.
 */
export function Spinner({ size = 'md', tone = 'primary', label = '불러오는 중' }: SpinnerProps) {
  return (
    <FoxSpinner className={TONE_CLASS[tone]} size={SIZE_PX[size]} label={label} />
  );
}