import { ReactNode } from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { createBox, createText, BoxProps as RSBoxProps } from '@shopify/restyle';
import { Theme } from '@styles/theme';
export const Box = createBox<Theme>();
export const SText = createText<Theme>();
export type BoxProps = RSBoxProps<Theme> & {
children?: ReactNode;
style?: StyleProp<ViewStyle>;
};
export const HStack = ({ children, ...props }: BoxProps) => (
<Box flexDirection="row" {...props}>
{children}
</Box>
);
export const VStack = ({ children, ...props }: BoxProps) => (
<Box flexDirection="column" {...props}>
{children}
</Box>
);
export const Flex = ({ children, ...props }: BoxProps) => (
<Box flex={1} {...props}>
{children}
</Box>
);
export const Container = ({ children, ...props }: BoxProps) => (
<Flex px="s-4" {...props}>
{children}
</Flex>
);
export const Center = ({ children, ...props }: BoxProps) => (
<Box justifyContent="center" alignItems="center" {...props}>
{children}
</Box>
);