import * as React from 'react';
import { View } from 'react-native';

import { enhanceViewStyle } from '~/utils/styles';

import { PRESETS, viewStyles as styles } from './form-row.presets';
import { FormRowProps } from './form-row.props';

/**
 * A horizontal container component used to hold a row of a form.
 */
export function FormRow(props: FormRowProps) {
  const errorStyle = props.error ? styles.error : {};
  const viewStyle = enhanceViewStyle([PRESETS[props.preset], errorStyle, props.style]);

  return <View style={viewStyle}>{props.children}</View>;
}
