/**
 * 📄 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 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div className="relative h-16 w-16">
        <LoadingWithAnimation color="primary" />
      </div>
    </div>
  );
};

export default LoadingOverlay;