import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import {realPhotos} from "../../data";
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import ImageListItemBar from '@mui/material/ImageListItemBar';
const imgData = realPhotos.slice(0,3)

function Gallery() {
  return (
    <Container maxWidth="lg">
      <Box sx={{ width: {xs:"100%", sm:"90%"}, height: 'min-content', m: '20px auto' } }>
        <ImageList
          variant="masonry"
          sx={{
            columnCount: {
              xs: '1 !important',
              sm: '1 !important',
              md: '3 !important',
              lg: '3 !important',
            },
          }}
          gap={5}>
          {imgData.map((item,index) => (
            <ImageListItem key={item.img} sx={{paddingTop: index%2!=0 ? '0px' : '5px'}}>
              <img
                alt={item.title}
                srcSet={item.img}
                src={item.img}
                loading="lazy"
              />
              <ImageListItemBar position="bottom" title={ item.title } />
            </ImageListItem>
          ))}
        </ImageList>
      </Box>
    </Container>
  );
}

export default Gallery;