import { Icon } from "./icon";

interface LoadingOverlayProps {
	visible: boolean;
	label?: string;
}

export function LoadingOverlay({ visible, label }: LoadingOverlayProps) {
	if (!visible) return null;

	return (
		<div className="loading-overlay" aria-live="polite">
			<div className="loading-overlay-content">
				<Icon
					name="loading"
					size="lg"
					className="icon-spin"
					ariaLabel={label}
				/>
				{label && <span className="loading-overlay-label">{label}</span>}
			</div>
		</div>
	);
}