import { useTranslation } from "@repo/rdx-ui/locales/i18n.ts";
import type { JSX } from "react";

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

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

/**
 * LoadingOverlay component
 * @param {string} title - The title to display in the loading overlay.
 * @param {string} subtitle - The subtitle to display in the loading overlay.
 * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional props to pass to the overlay.
 * @returns {JSX.Element} The LoadingOverlay component.
 */
export const LoadingOverlay = ({ title, subtitle, ...props }: LoadingOverlayProps): JSX.Element => {
  const { t } = useTranslation();

  const { title: defaultTitle, subtitle: defaultSubtitle } = t("components.loading_overlay", {
    returnObjects: true,
  }) as { title: string; subtitle: string };

  const loadingTitle = title || defaultTitle;
  const loadingSubtitle = subtitle || defaultSubtitle;

  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" subtitle={loadingSubtitle} title={loadingTitle} />
    </div>
  );
};

LoadingOverlay.displayName = "LoadingOverlay";