frontend/src/organisms/StoreSection.js

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

function StoreSection({ stores }) {
    return (
        <Container id="store" className="text-center justify-content-center align-items-center">
            <h1>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;