text: import React from "react";
  import {Link} from "react-router-dom";
  import Rating from "./sub-components/Rating";
  
  const Product = (props) => {
      const {product} = props;
  
      return (
          <Link to={`/product/${product._id}`} className="product-card">
              <img src={product.image} alt={product.name}/>
              <div className="product-card-wrapper">
                  <h3>{product.name}</h3>
                  <p className="price">$ {product.price}</p>  
                  
                  <Rating rating={product.rating} reviews={product.numReviews}/>
              </div>
          </Link>
      )
  }
  
  
  const ProductContainer = (props) => {
      return(
          <div className="product-container">
              {
                  props.products.map( product => <Product key={product._id} product={product}/>)
              }
          </div>
      )
  }
  
  export default ProductContainer;
  