import { ReactNode, CSSProperties } from "react";
import { Div } from "./Div";

export type VStackProps = {
    children: ReactNode;
    spacing?: CSSProperties['gap'];
    align?: CSSProperties['alignItems'];
    style?: Omit<CSSProperties, "gap" | "alignItems">;
};

export const VStack = ({ children, spacing = '8px', align = 'flex-start', style }: VStackProps) => {
    return (
        <Div
            style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: align,
                gap: spacing,
                ...style,
            }}
        >
            {children}
        </Div>
    );
};