import { Container, Col, Row } from 'react-bootstrap';
import NewsItem from '../molecules/NewsItem';

function NewsSection( {newsFeeds} ) {
    return (
        <Container id="news" className="text-center justify-content-center align-items-center">
            <h1>Tin tức</h1>
            <Row xs={1} md={2} xl={3} className="g-4">
                {Array.from(newsFeeds).map((feed, idx) => (
                    <Col key={idx}>
                        <NewsItem title={feed.title}
                            text={feed.text}
                            imageSrc={feed.imageSrc}
                            feedHref={feed.feedHref}>
                        </NewsItem>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

export default NewsSection;