// 로딩 스피너 컴포넌트
// API 호출 중 로딩 상태 표시용
// 대시보드 스타일로 통일 (border-4 border-solid border-primary border-r-transparent)

import React from 'react';

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

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 'md',
  className = '',
  text
}) => {
  const sizeClasses = {
    sm: 'h-4 w-4 border-2',
    md: 'h-8 w-8 border-4',
    lg: 'h-12 w-12 border-4'
  };

  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>
  );
};

// 페이지 레벨 로딩 스피너 (전체 화면 중앙 배치)
interface PageLoadingSpinnerProps {
  text?: string;
  minHeight?: string;
}

export const PageLoadingSpinner: React.FC<PageLoadingSpinnerProps> = ({
  text = '불러오는 중...',
  minHeight = 'min-h-[60vh]'
}) => {
  return (
    <div className={`flex items-center justify-center ${minHeight}`}>
      <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"></div>
        <p className="text-muted-foreground font-medium">{text}</p>
      </div>
    </div>
  );
};