import Carousel from 'react-material-ui-carousel'
import { Box } from '@mui/system';

import { url } from '../../App';

// карусель
export function MyCarouselPost({ postImages }) {
    // console.log('postImages: ', postImages)

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

            sx={{
                width: '100%',
            }}

        >
            {
                postImages.map(item =>
                    <Box
                        sx={{
                            paddingTop: '100%',
                            backgroundSize: 'contain',
                            backgroundColor: 'black',
                            backgroundImage: `url(/images/noPhoto.png)`,
                            backgroundRepeat: 'no-repeat',
                            backgroundPosition: 'center',
                        }}

                        key={item?.url}

                        style={item?.url &&
                            { backgroundImage: `url(${url + item.url})` }
                        }
                    />
                )
            }
        </Carousel >
    )
}

