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

function MenuSection() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex) => {
    setIndex(selectedIndex);
  };

  const menuItems = [
    { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
    { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
    { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
  ];

  const countCarouselSlides = 4;

  return (
    <Container id="menu" className="text-center justify-content-center align-items-center my-5">
      <h1 className='mb-5'>Menu</h1>
      <Carousel as='a' href='/menu' activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
        {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
          <Carousel.Item key={slideIndex}>
            <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
              <img
                className="img-fluid"
                src="/placeholder4.jpg"
                alt="a placeholder"                
                style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
              />
            </div>

            <Carousel.Caption>
              <div >
                <Row md={3} className="g-4">
                  {menuItems.map((item, idx) => (
                    <Col key={idx}>
                      <MenuItem
                        dishName={item.name}
                        description={item.description}
                        imageSrc={item.imageSrc}
                      />
                    </Col>
                  ))}
                </Row>
              </div>
            </Carousel.Caption>
          </Carousel.Item>
        ))}
      </Carousel>
    </Container>
  );
}

export default MenuSection;