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

export type LoadingRectangleBlockProps = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
>;

/**
 * # A loading Rectangle block
 * @className twui-loading-rectangle-block
 */
export default function LoadingRectangleBlock({
    ...props
}: LoadingRectangleBlockProps) {
    return (
        <div
            {...props}
            className={twMerge(
                "flex items-center w-full h-10 animate-pulse bg-slate-200 rounded",
                "twui-loading-rectangle-block",
                props.className
            )}
        >
            {props.children}
        </div>
    );
}