import { View, ViewStyle, StyleProp } from 'react-native';

type Align = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

type StackProps = {
  gap?: number;
  align?: Align;
  justify?: Justify;
  wrap?: boolean;
  style?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
};

export function HStack({
  gap = 0,
  align = 'center',
  justify = 'flex-start',
  wrap = false,
  style,
  children,
}: StackProps) {
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          alignItems: align,
          justifyContent: justify,
          gap,
          flexWrap: wrap ? 'wrap' : 'nowrap',
        },
        style,
      ]}>
      {children}
    </View>
  );
}

export function VStack({
  gap = 0,
  align = 'stretch',
  justify = 'flex-start',
  wrap = false,
  style,
  children,
}: StackProps) {
  return (
    <View
      style={[
        {
          flexDirection: 'column',
          alignItems: align,
          justifyContent: justify,
          gap,
          flexWrap: wrap ? 'wrap' : 'nowrap',
        },
        style,
      ]}>
      {children}
    </View>
  );
}

export const Spacer = ({ flex = 1 }: { flex?: number }) => <View style={{ flex }} />;