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

function NewsSection() {
    
    const newsFeeds = [
        { title: 'Feed 1', text: 'This is the first feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
        { title: 'Feed 2', text: 'This is the second feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
        { title: 'Feed 3', text: 'This is the third feed', imageSrc: '/placeholder1.jpg', feedHref: ''}
    ];
   
    return (
        <Container id="news" className="text-center justify-content-center align-items-center my-5">
            <h1 className='mb-5'>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}
                            feedHref="/news" //demo
                            >
                        </NewsItem>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

export default NewsSection;