import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import Center from "../layout/Center";
import Loading from "./Loading";

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    loadingProps?: ComponentProps<typeof Loading>;
};

/**
 * # Loading Overlay Component
 * @className_wrapper twui-loading-overlay
 */
export default function LoadingOverlay({ loadingProps, ...props }: Props) {
    return (
        <div
            {...props}
            className={twMerge(
                "absolute top-0 left-0 w-full h-full z-[500]",
                "bg-background-light/90 dark:bg-background-dark/90",
                props.className,
                "twui-loading-overlay"
            )}
        >
            <Center>
                <Loading {...loadingProps} />
            </Center>
        </div>
    );
}