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

function StoreSection() {
    
    const stores = [
        { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
        { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
        { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
    ];

    return (
        <Container id="store" className="text-center justify-content-center align-items-center my-5">
            <h1 className='mb-5'>Các chi nhánh</h1>
            <Row className="align-items-center">
                <Col xs={12} md={4} className="d-flex justify-content-center align-items-center">
                    Đây là các chi nhánh đang mở, chưa mở, sắp mở và có thể là sẽ không mở
                </Col>

                <Col xs={12} md={8}>
                    <Container>
                        <Row xs={1} md={2} xl={3} className="g-4">
                            {Array.from(stores).map((store, idx) => (
                                <Col key={idx}>
                                    <StoreItem storeName={store.storeName}
                                        address={store.address}
                                        imageSrc={store.imageSrc}>
                                    </StoreItem>
                                </Col>
                            ))}
                        </Row>
                    </Container>
                </Col>
            </Row>
        </Container>
    );
}

export default StoreSection;