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

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

/**
 * # Loading Overlay Component
 * @className_wrapper twui-loading-overlay
 */
export default function LoadingOverlay({
    loadingProps,
    label,
    ...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>
                <Row>
                    <Loading {...loadingProps} />
                    {label && <Span>{label}</Span>}
                </Row>
            </Center>
        </div>
    );
}