import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./Constants";
import Colors from "./Colors";

const newTag = require("../common/Image/cross.png");

const ProductCard = ({
  imageSource,
  imageComponent = null,
  isNew = false,
  whatsNew = "",
  title,
  onPress,
  imageStyle,
  style,
}) => {
  return (
    <View style={[styles.productView, styles.shadow, style]}>
      <TouchableOpacity onPress={onPress}>
        <View>
          {!!isNew ? (
            <Image source={newTag} style={styles.badgeImageStyle} />
          ) : (
            <View style={styles.badgeImageStyle} />
          )}
          <View style={[styles.productImageAndtextStyle]}>
            <View style={styles.productImageView}>
              {!!imageSource ? (
                <Image
                  source={imageSource}
                  style={[styles.productImage, imageStyle]}
                  resizeMode="contain"
                />
              ) : (
                imageComponent
              )}
            </View>
            <View style={styles.productImageView}>
              <Text style={styles.productNameStyle}>{title}</Text>
              <Text style={styles.badgeTextStyle}>{whatsNew}</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default ProductCard;

const styles = StyleSheet.create({
  productView: {
    marginLeft: 8,
    marginBottom: 16,
    width: (SCREEN_WIDTH - 100) / 3,
    borderColor: Colors.lightGray,
    borderWidth: 1,
    borderRadius: 4,
    backgroundColor: Colors.white,
    marginRight: 8,
  },
  shadow: {
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
  badgeImageStyle: {
    marginTop: 5,
    marginLeft: 10,
    resizeMode: "contain",
    width: 31,
    height: 14,
  },
  productImageAndtextStyle: {
    justifyContent: "center",
  },
  productImageView: {
    alignSelf: "center",
  },
  productImage: {
    width: 50,
    height: 50,
    justifyContent: "center",
  },
  productNameStyle: {
    fontSize: 12,
    fontFamily: "Muli-Bold",
    color: Colors.darkBlack,
    flexShrink: 1,
    textAlign: "center",
    marginLeft: 5,
    marginRight: 5,
  },
  badgeTextStyle: {
    color: Colors.green,
    fontFamily: "Muli-Regular",
    marginBottom: 4,
    textAlign: "center",
    fontSize: 10,
  },
});
