import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

/**
 * # General paper
 * @className_wrapper twui-loading-block
 */
export default function LoadingBlock({
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
    return (
        <div
            {...props}
            className={twMerge(
                "bg-slate-200 dark:bg-white/10",
                "rounded animate-pulse w-full h-[60px]",
                "twui-loading-block",
                props.className
            )}
        >
            {props.children}
        </div>
    );
}