import {Col, Container, Image, Row} from "react-bootstrap";
import React from "react";
import { LuFan } from "react-icons/lu";
import { TbToolsKitchen2 } from "react-icons/tb"
import { MdBalcony } from "react-icons/md"

const Table = (props) => {
    return (
        <>
            <Container className="px-1 w-100">
                <Row>
                    <Col className="d-flex justify-content-center">
                        <Image onClick={(e) => {
                            e.preventDefault();
                            console.log(props.data)
                            props.showModal(props.data)
                        }}
                               src="https://cdnimg.webstaurantstore.com/uploads/seo_category/2019/5/table-dining-sets.jpg"
                               style={{
                                   height: "8em",
                                   borderRadius: "1em",
                                   boxShadow: "0 4px 20px lightblue",
                                   maxWidth: "100%",
                               }}
                        ></Image>
                    </Col>
                    <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
                        <h3>Маса</h3>
                        <h3>Број на луѓе {props.data.noSeats}</h3>
                    </Col>

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

export default Table;