import type { ForwardedRef } from 'react';
import { forwardRef } from 'react';
import { View, type ViewProps } from 'react-native';
import { cn } from '@cdx-ui/utils';
import { vStackRootVariants, type StackSpace } from './styles';

export interface VStackProps extends ViewProps {
  className?: string;
  space?: StackSpace;
  reversed?: boolean;
}

export const VStack = forwardRef<View, VStackProps>(
  (
    { reversed = false, space, style, className, children, ...restProps },
    ref: ForwardedRef<View>,
  ) => {
    return (
      <View
        ref={ref}
        className={cn(vStackRootVariants({ reversed, space }), className)}
        style={style}
        {...restProps}
      >
        {children}
      </View>
    );
  },
);

VStack.displayName = 'VStack';