import { t } from "i18next";
import { LoadingIndicator } from "./loading-indicator";

export type LoadingOverlayProps = {
  title?: string;
  subtitle?: string;
};

export const LoadingOverlay = ({
  title = t("components.loading_overlay.title"),
  subtitle = t("components.loading_overlay.subtitle"),
  ...props
}: LoadingOverlayProps) => {
  return (
    <div
      className={
        "fixed top-0 bottom-0 left-0 right-0 z-50 w-full h-screen overflow-hidden flex justify-center bg-background/85"
      }
      {...props}
    >
      <LoadingIndicator look='dark' title={title} subtitle={subtitle} />
    </div>
  );
};

LoadingOverlay.displayName = "LoadingOverlay";