import React, { Fragment } from 'react';
import P from '../../Common/BackBox/P.jsx';

const ItemCarousel = (props) => {

    const eventoClick = async () => await props.onClick(props.Id);

    return (
        <div>
            <ul className='lista-articulos'>
                <li className='item'>
                    {props.Calificacion !== undefined && <ul className="stars2">
                        {props.generarEstrellas(props.Calificacion)}
                    </ul>}

                    <P clase='number' valor={props.TopVentas} />
                    <img className="imagen-peq" src={props.Imagen} onClick={eventoClick} style={{ cursor: 'pointer' }} />
                    <P clase='nombre' valor={props.Nombre} />
                </li>
            </ul>
        </div>
    );
}
export default ItemCarousel;