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

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    center?: boolean;
    gap?: number | string;
    componentRef?: React.RefObject<HTMLDivElement>;
};

/**
 * # Flexbox Column
 * @className twui-stack
 */
export default function Stack({ gap, componentRef, ...props }: Props) {
    const finalProps = _.omit(props, "center");
    return (
        <div
            {...finalProps}
            className={twMerge(
                "flex flex-col items-start gap-4",
                props.center && "items-center",
                gap
                    ? typeof gap == "string"
                        ? `gap-[${gap}]`
                        : `gap-${gap}`
                    : "",
                "twui-stack",
                props.className
            )}
            ref={componentRef}
        >
            {props.children}
        </div>
    );
}
