import { Carousel } from "react-bootstrap";
import { Link } from "react-router-dom";
import FeaturedImage from "./FeaturedImage";

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">
                    <Link key={product.id} to={`/morceaux/${product.id}`}>
                        <FeaturedImage productId={product.id}/>
                        <Carousel.Caption className="featured-info">
                            <h3>{product.title}</h3>
                            <p>{(product.description).substring(0,100)}...</p>
                            <h5>Seulement</h5>
                            <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
                        </Carousel.Caption>
                    </Link>
                </Carousel.Item>
            ))}
        </Carousel>
    );
}

export default FeaturedList;