frontend/src/organisms/StoreSection.js

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

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' },
    // ];

    const [stores, setStores] = useState([]); // Lưu danh sách chi nhánh
    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu

    useEffect(() => {
        // Gọi API lấy danh sách chi nhánh
        const fetchBranches = async () => {
            try {
                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
                setStores(response.data); // Lưu dữ liệu vào state
                setLoading(false); // Đặt loading thành false khi hoàn tất
                CacheStorage.set('stores',JSON.stringify(Object(response.data)));
            } catch (error) {
                console.error('Error fetching branches:', error);
                setLoading(false); // Đặt loading thành false nếu lỗi
            }
        };
        if (CacheStorage.get('stores')) {
            setStores(JSON.parse(CacheStorage.get('stores')));
            setLoading(false);
        } else {
            fetchBranches();
        }
    }, []); // Chỉ chạy một lần khi component được mount

    let storesContent;

    if (loading) {
        storesContent = (<p>Đang tải danh sách chi nhánh...</p>); // Hiển thị thông báo khi đang tải dữ liệu
    } else {
        storesContent = (<Col xs={12} md={9}>
            <Container fluid>
                <Row xs={1} md={2} xl={3} className="g-4">
                    {Array.from(stores).map((store, idx) => (
                        <Col key={idx}>
                            <StoreItem storeName={store.name}
                                address={store.location}
                                imageSrc={store.image_url}>
                            </StoreItem>
                        </Col>
                    ))}
                </Row>
            </Container>
        </Col>)
    }

    return (
        <Container fluid id="store" className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "90%" }}>
            <h1 className='mb-5'>Các chi nhánh</h1>
            <Row className="align-items-center">
                <Col xs={12} md={3} className="d-flex justify-content-center align-items-center">
                    Là hệ thống chuỗi nhà hàng nổi tiếng toàn quốc, chúng tôi đang hoạt động ở các cơ sở sau
                </Col>

                {storesContent}
            </Row>
        </Container>
    );
}

export default StoreSection;