/**
 * 📄 Loading Overlay Component
 * 로딩 오버레이 컴포넌트
 *
 * - 로딩 상태에 따른 오버레이 표시 및 숨김
 * - 반투명 배경을 통한 사용자 인터랙션 차단
 * - 애니메이션 로딩 아이콘 표시
 * - 고정 위치 및 z-index를 통한 최상위 레이어 배치
 * - 조건부 렌더링을 통한 성능 최적화
 */
import React from 'react';
import { LoadingWithAnimation } from '@common/components/ui/loading';

interface LoadingOverlayProps {
  isLoading: boolean;
}

const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading }) => {
  if (!isLoading) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div className="relative w-16 h-16">
        <LoadingWithAnimation color="primary" />
      </div>
    </div>
  );
};

export default LoadingOverlay;