import React from "react";
import { View, Text, StyleSheet, Image } from "react-native";

const CartSubCard = ({ cart }) => {
  return (
    <View style={styles.container}>
      <View style={styles.imgWrap}>
        <Image
          style={{ width: 50, height: 50, resizeMode: "cover" }}
          source={{ uri: cart.img }}
        />
      </View>
      <View style={styles.wrapper}>
        <View style={styles.details}>
          <Text style={styles.text} numberOfLines={2}>
            {cart.name}
          </Text>

          <View style={styles.rateCon}>
            {cart.price ? (
              <>
                <View style={styles.priceCon}>
                  <Text
                    style={
                      cart.promo ? styles.textPricePromo : styles.textPrice
                    }
                  >
                    ₱{cart.price}
                  </Text>
                  {cart.promo ? (
                    <Text style={styles.textPrice}>
                      {" "}
                      {cart.price - cart.price * 0.3}{" "}
                      <Text style={{ fontWeight: "400" }}>
                        (-{cart.promo}%)
                      </Text>
                    </Text>
                  ) : null}
                </View>
              </>
            ) : (
              <Text>No price </Text>
            )}
          </View>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // width: "95%",
    margin: 5,
    borderRadius: 6,
    borderColor: "#dddd",
    borderWidth: 1,
    overflow: "hidden",
    flexDirection: "row",
    padding: 10,
    backgroundColor:'#ffffff'

  },

  header: {
    position: "fixed",
    width: "100%",
    top: 0,
  },
  footer: {
    // position: "absolute",
    bottom: 0,
    width: "100%",
  },
  imgWrap:{
    padding:10
  },
  wrapper: {
    height: "85%",
    width: "60%",
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  textPrice: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  details: {
    // width: "50%",
  },
  text: {
    fontSize: 13,
  },
});

export default CartSubCard;