import Carousel from 'react-material-ui-carousel'
import { Paper, Button, CardMedia } from '@mui/material'
import { Image } from '@mui/icons-material'

export function CarouselProductOnePage({product})
{
    const items = product?.images

    // [
    //     {
    //         name: "Random Name #1",
    //         description: "Probably the most random thing you have ever seen!"
    //     },
    //     {
    //         name: "Random Name #2",
    //         description: "Hello World!"
    //     }
    // ]

    return (
        <Carousel
         height='400px'
        navButtonsAlwaysVisible={true}
         >
            {
                items && items.map( (item, i) => <Item key={i} item={item} /> )
            }
        </Carousel>
    )
}

function Item(props)
{

    return (
        <Paper>
        <CardMedia
                        sx={{ 
                            height: '400px',
                            width: '100%',
                            backgroundSize: 'contain',
                            backgroundRepeat: 'no-repeat',
                            backgroundPosition: 'center',
                            padding: "10px",
                            backgroundOrigin: 'content-box'
                            }}
                        image={props.item ? `http://shop-roles.node.ed.asmer.org.ua/${props.item.url}` : "https://archive.org/download/no-photo-available/no-photo-available.png" }
                        // alt={product?.name}
                    />
         </Paper>
    )
}