import './GalleryLoadingMarker.css';

interface Props {
  message?: string;
  /** Full-area overlay (dims background). */
  overlay?: boolean;
  /** Compact strip along the bottom — does not block interaction. */
  banner?: boolean;
  /** Inline row for small panels (debug upload, etc.). */
  compact?: boolean;
  className?: string;
}

export default function GalleryLoadingMarker({
  message = 'Loading…',
  overlay = false,
  banner = false,
  compact = false,
  className = '',
}: Props) {
  const modeClass = overlay
    ? ' gallery-loading-marker-overlay'
    : banner
      ? ' gallery-loading-marker-banner'
      : compact
        ? ' gallery-loading-marker-compact'
        : '';

  return (
    <div
      className={`gallery-loading-marker${modeClass}${className ? ` ${className}` : ''}`}
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      <div className="gallery-loading-marker-spinner" aria-hidden />
      <p>{message}</p>
    </div>
  );
}