import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Colors from "../constants/colors";

const EventCard = (props) => {
  return (
    <TouchableOpacity style={{ ...styles.screen, ...props.style }}>
      <View style={styles.eventItem}>
        <Text style={styles.text}>
          {props.event._name} ({props.event._date})
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItem: "center",
    justifyContent: "center",
    backgroundColor: Colors.primary500,
  },
  eventItem: {
    margin: 10,
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "white",
    height: 60,
    backgroundColor: Colors.primary400,
  },
  text: {
    color: "white",
  },
});

export default EventCard;