import React from 'react';
import PropTypes from 'prop-types';

import {
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

import styles from './EventTitle.styles.js';

export default function EventTitle({
  action,
  date,
  end,
  name,
  start,
}) {
   const _generateEventTitle = () => (
    <View style={styles.eventInfo}>
      <Text style={styles.eventName}>{name}</Text>
      <Text style={styles.eventDate}>{`${date} | ${start} - ${end}`}</Text>
    </View>
  );

  if (action) {
    return <TouchableOpacity onPress={action}>{_generateEventTitle()}</TouchableOpacity>;
  }

  return _generateEventTitle();
}

EventTitle.propTypes = {
  action: PropTypes.func,
  date: PropTypes.string.isRequired,
  end: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  start: PropTypes.string.isRequired,
};

EventTitle.defaultProps = {
  action: null,
};