sam-react-prod/src/components/ui/loading-spinner.tsx

/**
 * 로딩 스피너 컴포넌트 (표준화됨)
 *
 * 사용 가이드:
 * - LoadingSpinner: 인라인/버튼 내부/작은 영역용
 * - ContentLoadingSpinner: 컨텐츠 영역 로딩용 (상세/수정 페이지)
 * - PageLoadingSpinner: 페이지 전환용 (loading.tsx, 전체 페이지)
 *
 * 스타일: border-4 border-solid border-primary border-r-transparent
 */

import React from 'react';

// ============================================
// 1. 기본 스피너 (인라인/버튼 내부용)
// ============================================
interface LoadingSpinnerProps {
  size?: 'xs' | 'sm' | 'md' | 'lg';
  className?: string;
  text?: string;
}

const sizeClasses = {
  xs: 'h-3 w-3 border-2',
  sm: 'h-4 w-4 border-2',
  md: 'h-8 w-8 border-3',
  lg: 'h-12 w-12 border-4'
};

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 'md',
  className = '',
  text
}) => {
  return (
    <div className={`flex flex-col items-center justify-center gap-2 ${className}`}>
      <div
        className={`animate-spin rounded-full border-solid border-primary border-r-transparent ${sizeClasses[size]}`}
      />
      {text && <p className="text-sm text-muted-foreground">{text}</p>}
    </div>
  );
};

// ============================================
// 2. 컨텐츠 영역 스피너 (상세/수정 페이지용)
// ============================================
interface ContentLoadingSpinnerProps {
  text?: string;
}

export const ContentLoadingSpinner: React.FC<ContentLoadingSpinnerProps> = ({
  text = '불러오는 중...'
}) => {
  return (
    <div className="flex items-center justify-center min-h-[400px]">
      <div className="text-center space-y-3">
        <div className="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
        <p className="text-sm text-muted-foreground">{text}</p>
      </div>
    </div>
  );
};

// ============================================
// 3. 페이지 레벨 스피너 (페이지 전환용)
// ============================================
interface PageLoadingSpinnerProps {
  text?: string;
}

export const PageLoadingSpinner: React.FC<PageLoadingSpinnerProps> = ({
  text = '페이지를 불러오는 중...'
}) => {
  return (
    <div className="flex items-center justify-center min-h-[calc(100vh-200px)]">
      <div className="text-center space-y-4">
        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
        <p className="text-muted-foreground font-medium">{text}</p>
      </div>
    </div>
  );
};

// ============================================
// 4. 테이블/리스트 오버레이 스피너
// ============================================
interface TableLoadingSpinnerProps {
  text?: string;
  rows?: number;
}

export const TableLoadingSpinner: React.FC<TableLoadingSpinnerProps> = ({
  text = '데이터를 불러오는 중...',
  rows = 5
}) => {
  return (
    <div className="flex items-center justify-center py-16">
      <div className="text-center space-y-3">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
        <p className="text-sm text-muted-foreground">{text}</p>
      </div>
    </div>
  );
};

// ============================================
// 5. 버튼 내부 스피너 (저장 중 등)
// ============================================
export const ButtonSpinner: React.FC = () => {
  return (
    <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent" />
  );
};