// Component con để hiển thị hình ảnh sản phẩm và gallery
const ProductImageGallery = ({ images, mainImage, setMainImage, productName, fromPage, isMobile, showCart }) => {
    const { Modal } = ReactBootstrap;
    const [showModal, setShowModal] = useState(false);
    const handleShow = () => setShowModal(true);
    const handleClose = () => setShowModal(false);
    
    
    if (!images || images.length === 0) {
        return (
            <div className="text-center p-3 border rounded bg-light">
                <i className="fa fa-picture-o fa-5x text-muted"></i>
                <p className="mt-2 text-muted">No image available</p>
            </div>
        );
    }

    return (
        <div className="text-center">
            <img
                src={`/api/get-product-image/${mainImage}`}
                alt={`Product: ${productName}`}
                style={{
                    width: '100%',
                    maxHeight: isMobile ? '250px' : '350px',
                    objectFit: 'contain',
                    marginBottom: '15px',
                    cursor: 'pointer',
                    borderRadius: '8px',
                    border: '1px solid #eee'
                }}
                onClick={handleShow}
                //onError={(e) => { e.target.onerror = null; e.target.src='/static/libs/images/no_image.jpg'; }}
            />
            {fromPage === 'cart' && images?.length > 1 && (
                <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: '10px' }}>
                    {images?.map((img, key) => (
                        <img
                            key={key}
                            src={`/api/get-product-image/${img}`}
                            alt={`Thumbnail ${key + 1}`}
                            style={{
                                width: '60px',
                                height: '60px',
                                objectFit: 'cover',
                                cursor: 'pointer',
                                border: mainImage === img ? '2px solid #f344a4' : '2px solid #ddd',
                                borderRadius: '8px',
                                transition: 'border-color 0.2s'
                            }}
                            onClick={() => setMainImage(img)}
                            //onError={(e) => { e.target.onerror = null; e.target.src='/static/libs/images/no_image.jpg'; }}
                        />
                    ))}
                </div>
            )}
            <Modal show={showModal} onHide={handleClose} centered size="lg">
                <Modal.Header closeButton>
                    <Modal.Title>{productName}</Modal.Title>
                </Modal.Header>
                <Modal.Body className="text-center">
                    <img
                        src={`/api/get-product-image/${mainImage}`}
                        alt={`Enlarged: ${productName}`}
                        style={{ width: '100%', height: 'auto', borderRadius: '8px' }}
                        //onError={(e) => { e.target.onerror = null; e.target.src='/static/libs/images/no_image.jpg'; }}
                    />
                </Modal.Body>
            </Modal>
        </div>
    );
};