import Carousel from 'react-material-ui-carousel'

// айтемы для каждой картинки
function Item(props) {
    return (
        <div className="tut-kartinka" style={{
            display: 'flex',
            justifyContent: 'center'
        }}>
            <img alt='alt' src={props.item.url} style={{
                maxWidth: '100%',
                maxHeight: '100%'
            }} />
        </div>
    )
}

// сама карусель - ее нужно вынеси в отдельный контенйре
export function MyCarouselPost(props) {

    let items = [
        {
            url: "/images/image4.jpeg"
        },
        {
            url: "/images/image.jpeg"
        },
        {
            url: "/images/image2.jpeg"
        },

    ]

    return (
        <Carousel autoPlay={false} cycleNavigation={false} animation={"slide"} indicatorContainerProps={{
            style: {
                marginTop: '-50px',
                zIndex: 999,
                position: 'inherit'
            }

        }} className='tut-blok-kartinki' sx={{
            width: '100%'
        }}>
            {
                items.map((item, i) =>
                    <Item key={i} item={item}
                    />)
            }
        </Carousel >
    )
}

