Obanana_test/app/components/search/ShopCard.jsx

import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
  Image,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

const ShopCard = ({ shop, product }) => {
  const [shopProd, setshopProd] = useState([]);
  // console.log(product);
  const navigation = useNavigation();
  const isFocused = useIsFocused();

  useEffect(() => {
    const purch = product?.filter((item) => item.vendor_api_id === shop._id);
    // console.log(purch);
    setshopProd(purch.slice(0, 3));
  }, [isFocused]);
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={styles.container}
      onPress={() => navigation.navigate("Shop", { product: shop })}
    >
      <View style={styles.top}>
        <View style={styles.imgWrap}>
          <Image
            style={{
              width: 80,
              height: 80,
              resizeMode: "cover",
              marginRight: 10,
            }}
            source={{
              uri: shop.vendor_image
                ? shop.vendor_image
                : "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
            }}
          />
        </View>
        <View style={styles.details}>
          <Text style={styles.text} numberOfLines={2}>
            {shop.user_login}
          </Text>
          <View style={styles.rateCon}>
            {shop.rate ? (
              <>
                <Text style={styles.textHead}>Rating: </Text>
                <FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
                <Text style={styles.textRate}>
                  {shop.rate} ({shop.raterTotal})
                </Text>
              </>
            ) : (
              <Text>No rating </Text>
            )}
          </View>
          <View style={styles.rateCon}>
            <Text style={styles.textHead}>Average Response Time: </Text>
            {shop.respoTime ? (
              <>
                <Text style={styles.textRate}>{shop.respoTime}hrs</Text>
              </>
            ) : (
              <Text></Text>
            )}
          </View>
          <View style={styles.rateCon}>
            <Text style={styles.textHead}>Main Products: </Text>
            {shop.respoTime ? (
              <>
                {shop.tags.map((e, i) => (
                  <Text style={styles.textRate} key={i}>
                    {e},{" "}
                  </Text>
                ))}
              </>
            ) : (
              <Text></Text>
            )}
          </View>
        </View>
        <View style={styles.btnWrap}>
          <TouchableOpacity style={styles.btnmess}>
            <FontAwesomeIcon icon={faMessage} color={"#00C85C"} size={25} />
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.bot}>
        <View style={styles.botWrap}>
          {isFocused === true ? (
            <>
              {shopProd?.map((e, i) => (
                <Image
                  key={i}
                  style={{
                    width: 100,
                    height: 100,
                    resizeMode: "cover",
                    borderWidth: 1,
                    borderColor: "#ddd",
                    borderRadius: 10,
                  }}
                  source={{
                    uri:
                      e.product_image ??
                      "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
                  }}
                />
              ))}
            </>
          ) : null}
        </View>
      </View>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  container: {
    width: "98%",
    margin: 5,
    borderRadius: 6,
    borderColor: "#dddd",
    overflow: "hidden",
  },
  wrapper: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  top: {
    width: "100%",
    justifyContent: "space-between",
    alignItems: "center",
    height: 150,
    flexDirection: "row",
    backgroundColor: "#FFFFFF",
  },
  imgWrap: {
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
    marginLeft: 10,
  },
  heart: {
    position: "absolute",
    top: 10,
    right: 10,
    height: 20,
    width: 20,
  },
  btnWrap: {
    width: 80,
    height: 80,
    // backgroundColor: "#ffaa00",
    alignItems: "center",
    justifyContent: "center",
  },
  btnmess: {
    backgroundColor: "#74fab2",
    padding: 15,
    borderRadius: 10,
  },
  details: {
    height: "100%",
    width: "55%",

    justifyContent: "center",
    // alignItems:'center'
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
  },
  text: {
    fontSize: 15,
    fontWeight: "900",
    textTransform: "uppercase",
    color: "#333",
    letterSpacing: 0.5,
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 4,
  },
  textPrice: {
    fontSize: 16,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 16,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  textMin: {
    fontSize: 11,
    fontWeight: "600",
    color: "#bdbdbd",
  },
  textSold: {
    fontSize: 11,
    fontWeight: "600",
    color: "#bdbdbd",
  },
  rateCon: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 3,
  },
  textHead: {
    fontSize: 11,
    color: "#292929",
  },
  textRate: {
    fontSize: 12,
    color: "#838383",
    textTransform: "capitalize",
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
  },
  bot: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    paddingVertical: 10,
  },
  botWrap: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around",
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
});
export default ShopCard;