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

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    horizontal?: boolean;
};

/**
 * # Space Component
 * @className twui-spacer
 */
export default function Spacer({ horizontal, ...props }: Props) {
    return (
        <div
            {...props}
            className={twMerge(
                "grow",
                horizontal ? "w-10" : "w-full h-10",
                "twui-spacer",
                props.className
            )}
        >
            {props.children}
        </div>
    );
}