import LoadingIndicator from "./LoadingIndicator";
import { usePlatformLanguage } from "../i18n/LanguageContext";

type LoadingFrameProps = {
  children: React.ReactNode;
  loading?: boolean;
  label?: string;
  className?: string;
};

export default function LoadingFrame({ children, loading = false, label = "i18n:govoplan-core.loading_data.089f19c5", className = "" }: LoadingFrameProps) {
  const { translateText } = usePlatformLanguage();
  const translatedLabel = translateText(label);
  const classNames = ["loading-frame", loading ? "is-loading" : "", className].filter(Boolean).join(" ");

  return (
    <div className={classNames} aria-busy={loading || undefined}>
      {children}
      {loading &&
      <div className="loading-frame-overlay" role="status" aria-live="polite">
          <div className="loading-frame-panel">
            <LoadingIndicator label={translatedLabel} size="md" />
            <span>{translatedLabel}</span>
          </div>
        </div>
      }
    </div>);

}