frontend/src/pages/MenuPage.js

import { useState } from 'react';
import { Modal, Button, Container, Row, Col, Tab, Tabs } from 'react-bootstrap';
import MenuItem from '../molecules/MenuItem';
import BasicTemplate from '../templates/BasicTemplate';
function MenuPage() {
    const [key, setKey] = useState('cat1');
    const [selectedDish, setSelectedDish] = useState(null);
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    function handleShow(dish) {
        setSelectedDish(dish);  // Set the selected dish to state
        setShow(true);          // Show the modal
    }

    const menuItems1 = [
        { name: 'Món 1 thể loại 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 2 thể loại 1', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 3 thể loại 1', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
    ];

    const menuItems2 = [
        { name: 'Món 1 thể loại 2', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 2 thể loại 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
    ];

    const menuItems3 = [
        { name: 'Món 1 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 2 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 3 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 4 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 5 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
        { name: 'Món 6 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
    ];

    return <BasicTemplate content={(
        <Container fluid className='my-5'>
            <>
                <Modal show={show} onHide={handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>{selectedDish?.name}</Modal.Title> {/* Dish name in the title */}
                    </Modal.Header>
                    <Modal.Body>
                        <p>{selectedDish?.description}</p>  {/* Dish description */}
                        <img src={selectedDish?.imageSrc} alt={selectedDish?.name} style={{ width: '100%' }} />  {/* Dish image */}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
            <h1 className='text-center mb-5'>Thực đơn</h1>
            <Row>
                <Col xs={1} md={2}></Col>
                <Col xs={10} md={8}>
                    <Tabs
                        id="controlled-tab-example"
                        activeKey={key}
                        onSelect={(k) => setKey(k)}
                        className="mb-3"
                    >
                        <Tab eventKey="cat1" title="Thể loại 1">
                            <Container fluid className='my-5'>
                                <Row md={3} className="g-4">
                                    {menuItems1.map((item, idx) => (
                                        <Col key={idx} >
                                            <div onClick={() => handleShow(item)}>
                                                <MenuItem
                                                    dishName={item.name}
                                                    description={item.description}
                                                    imageSrc={item.imageSrc}
                                                />
                                            </div>

                                        </Col>
                                    ))}
                                </Row>
                            </Container>
                        </Tab>
                        <Tab eventKey="cat2" title="Thể loại 2">
                            <Container fluid className='my-5'>
                                <Row md={3} className="g-4">
                                    {menuItems2.map((item, idx) => (
                                        <Col key={idx}>
                                            <div onClick={() => handleShow(item)}>
                                                <MenuItem
                                                    dishName={item.name}
                                                    description={item.description}
                                                    imageSrc={item.imageSrc}
                                                />
                                            </div>
                                        </Col>
                                    ))}
                                </Row>
                            </Container>
                        </Tab>
                        <Tab eventKey="cat3" title="Thể loại 3">
                            <Container fluid className='my-5'>
                                <Row md={3} className="g-4">
                                    {menuItems3.map((item, idx) => (
                                        <Col key={idx}>
                                            <div onClick={() => handleShow(item)}>
                                                <MenuItem
                                                    dishName={item.name}
                                                    description={item.description}
                                                    imageSrc={item.imageSrc}
                                                />
                                            </div>
                                        </Col>
                                    ))}
                                </Row>
                            </Container>
                        </Tab>
                    </Tabs>
                </Col>
                <Col xs={1} md={2}></Col>
            </Row>
        </Container>

    )} />
}

export default MenuPage;