text: import React from "react";
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    ImageBackground,
  } from "react-native";
  import DefaultText from "./DefaultText";
  
  const MealItem = (props) => {
    return (
      <View style={{ ...styles.mealItem, ...props.style }}>
        <TouchableOpacity onPress={props.onSelectMeal}>
          <View>
            <View style={{ ...styles.mealRow, ...styles.mealHeader }}>
              <ImageBackground
                source={{ uri: props.image }}
                style={styles.backgroundImage}
              >
                <View style={styles.titleContainer}>
                  <Text style={styles.title} numberOfLines={1}>
                    {props.title}
                  </Text>
                </View>
              </ImageBackground>
            </View>
            <View style={{ ...styles.mealRow, ...styles.mealDetail }}>
              <DefaultText>{props.duration}m</DefaultText>
              <DefaultText>{props.complexity}</DefaultText>
              <DefaultText>{props.affordability}</DefaultText>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    mealItem: {
      flex: 1,
      height: 200,
      // width: "100%",
      backgroundColor: "#ccc",
      borderRadius: 15,
      overflow: "hidden",
      margin: 10,
    },
    mealRow: {
      flexDirection: "row",
    },
    mealHeader: {
      height: "85%",
    },
    mealDetail: {
      paddingHorizontal: 10,
      justifyContent: "space-between",
      alignItems: "center",
      height: "15%",
    },
    backgroundImage: {
      width: "100%",
      height: "100%",
      justifyContent: "flex-end",
    },
    title: {
      fontFamily: "open-sans-bold",
      fontSize: 20,
      color: "white",
    },
    titleContainer: {
      paddingVertical: 5,
      paddingHorizontal: 10,
      backgroundColor: "rgba(0,0,0,0.5)",
    },
  });
  
  export default MealItem;
  