import React from 'react';
import {Link} from "react-router-dom";
import { Card, CardImg } from 'react-bootstrap';
import Rating from "./Rating";

const Product = ({product}) => {
    return (
        
        <Card className="my-3 p-3 reound">
            <Link to={`/product/${product._id}`}>
            <CardImg src={product.image} variant="top" />
            </Link>
            <Card.Body>
                <Link to={`/product/${product._id}`}>
                <Card.Title>
                    <strong>{product.name}</strong>
                </Card.Title>
            </Link> 
            <Card.Text as="div">
                <Rating 
                value={product.rating}
                text={`${product.numReviews} reviews`}/>
            </Card.Text>
             <Card.Text as="h3">${product.price}</Card.Text>
            </Card.Body>
        </Card>
      
    )
}

export default Product

