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,
};
