import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './CardContainer.css';
import CardFilm from './CardFilm';  

class CardContainer extends React.Component {
    render() {
        const locandine = [
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine01.jpeg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine02.jpeg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine03.jpeg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine04.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine05.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine06.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine07.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine08.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine09.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine10.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine11.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine12.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine13.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine14.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine15.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine16.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine17.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine18.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine19.jpg",
            "https://www.ilpost.it/wp-content/uploads/2017/12/locandine20.jpg",
        ];
    
        const cards = []

        for (const [index, value] of locandine.entries()) {
            cards.push(
                <CardFilm
                    alt="copertina" 
                    key={index}
                    src={value}
                    title="Card Title"
                    body="Some quick example text to build on the card title and make up the bulk of the card's content."
                />
            )
        }
    
        return (
            <div>
                <p className="sect-title">{this.props.sectionTitle}</p>
                <div className="container-mod">
                    {cards}
                </div>
            </div>
        );
    }
}

export default CardContainer;