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 = () => {
        const whenString = `${date} | ${start} - ${end}`;

        return (
            <View style={styles.eventInfo}>
                <Text style={styles.eventName}>{name}</Text>
                <Text style={styles.eventDate}>{whenString}</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,
};