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

import { Box } from '@mui/material'

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

function Item(imgUrl) {
    return (
        <Box
            style={{
                width: '100%',
                height: 625,
                backgroundColor: 'black',
                display: 'flex',
                alignItems: 'center'
            }}>

            <img
                alt='image'
                src={imgUrl?.item && (url.slice(0, -7) + imgUrl?.item)}
                style={{
                    width: '100%'
                }}
            />
        </Box>
    )
}

export function MyCarousel({ images }) {

    return (
        <Carousel
            autoPlay={false}
            cycleNavigation={false}
            animation={'slide'}
            indicatorContainerProps={{
                style: {
                    marginTop: '-50px',
                    zIndex: 999,
                    position: 'inherit'
                }
            }}
        >
            {
                images && images.map((item, i) => <Item key={i} item={item?.url} />)
            }
        </Carousel >
    )
}

