import { FC, ReactNode } from 'react';
import { View, Text } from 'react-native';
import { styles } from './styles';

export const InfoItem: FC<{
  title: string;
  inline?: boolean;
  children: ReactNode;
  showMore?: boolean;
}> = ({ title, inline, children, showMore }) => (
  <View>
    <Text style={[styles.headerText, { flex: 0 }]}>{title}</Text>
    <View
      style={[
        {
          display: 'flex',
          flexDirection: inline ? 'row' : 'column',
          justifyContent: 'space-evenly',
          marginTop: 10
        },
        showMore ? { flexWrap: 'wrap', gap: 8 } : {}
      ]}
    >
      {children}
    </View>
  </View>
);