import { Carousel } from "react-bootstrap";
const FeaturedList = ({ products }) => {
    if (products === null)
        return (<></>);
    return (
        <Carousel variant="dark" className="featured-lst">
            {products.map((product) => (
                <Carousel.Item key={product.id} className="featured-itm">
                    <img
                        className="featured-img"
                        src={`/images/${product.imageName}.jpg`}
                    />
                    <Carousel.Caption className="featured-info">
                        <h3>{product.title}</h3>
                        <p>{product.description}</p>
                        <h5>Seulement</h5>
                        <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
                    </Carousel.Caption>
                </Carousel.Item>
            ))}
        </Carousel>
    );
}

export default FeaturedList;