import { Grid, Typography } from "@mui/material"
import { useParams } from "react-router-dom"
import { useGetProductQuery } from "../../store/categoriesApi"
import { CarouselProductOnePage } from "../CarouselProductOnePage"
import ImageUploader from "../ImageUploader"


const ProductOnePage = () => {
    
    const {prodId} = useParams()

    const {data: payload = null} = useGetProductQuery(prodId)
    const product = payload ? Object.values(payload)[0] : null
    
    return (
        <Grid container spacing={2} alignItems="start" marginTop={3} marginBottom={3}>
            <Grid item xs={12} sm={6} align-self="stretch" padding={2}>
                <CarouselProductOnePage product={product} />
            </Grid>
            <Grid item xs={12} sm={6} align-self="stretch">
                <Typography
                    variant="h4"
                    component="h1">
                    {product?.name}
                </Typography>
                <Typography variant="body1">
                    {product?.description}
                </Typography>
            </Grid>
        </Grid>
    )
}

export default ProductOnePage