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

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

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

HStack.displayName = 'HStack';