import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';

interface Props {
  containerStyle?: ViewStyle;
  style?: ViewStyle;
  title?: string;
  children: JSX.Element | JSX.Element[];
}

const StyledCard: React.SFC<Props> = (props) => (
  <View>
    {props.title &&
      <Text style={styles.title}>
        {props.title}
      </Text>
    }
    <View style={[styles.container, props.style]}>
      <View style={props.containerStyle}>
        {props.children}
      </View>
    </View>
  </View>
);
export { StyledCard as Card };

const styles = StyleSheet.create({
  container: {
    margin: 4,
    padding: 12,
    borderColor: 'transparent',
    elevation: 1,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 14,
    marginTop: 12,
    paddingHorizontal: 12,
    alignSelf: 'flex-start',
    fontWeight: 'bold',
  },
});
