import {PropsWithChildren} from 'react';
import {View, ViewProps} from 'react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends PropsWithChildren<ViewProps> {
  topText: string;
  rightChildren?: React.ReactNode;
}

export default function RowItem({
  topText,
  children,
  rightChildren,
  ...props
}: Props) {
  const {theme} = useTheme();

  return (
    <View
      {...props}
      style={[props.style, !!rightChildren && styles.rowContainer]}>
      <View style={styles.content}>
        <Typography variant="xxs" color={theme.text.neutral.lighter}>
          {topText}
        </Typography>
        {children}
      </View>
      {rightChildren}
    </View>
  );
}