import { ShoppingBasketSharp } from "@mui/icons-material"
import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Grid, Icon, IconButton, Typography } from "@mui/material"
import { useDispatch } from "react-redux"
import { Link } from "react-router-dom"
import { CartAdd } from "../store/cartSlice"

const CardProduct = ({product}) => {
    const dispatch = useDispatch()
    
    return(
        <Grid item xs={12} md={4}>
            <Card sx={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: 'space-between' }}>
                <CardActionArea
                 sx={{flex: "1", display: 'flex', flexDirection: "column"}}
                 component={Link} to={`/product/${product._id}/${product.name}`}
                 >
                    <CardMedia
                        sx={{ 
                            height: '200px',
                            width: '100%',
                            backgroundSize: 'contain',
                            backgroundRepeat: 'no-repeat',
                            backgroundPosition: 'center',
                            padding: "10px",
                            backgroundOrigin: 'content-box'
                            }}
                        image={product?.images ? `http://shop-roles.node.ed.asmer.org.ua/${product.images[0].url}` : "https://archive.org/download/no-photo-available/no-photo-available.png" }
                        alt={product?.name}
                    />

                    <CardContent sx={{flex: '1', display: "flex", flexDirection: "column", justifyContent: 'space-between' }}>
                        <Typography
                            variant="h6"
                            component="h3"
                            align="center"
                            mb={2}
                            >
                            {product?.name} 
                        </Typography>
                        <Typography variant="body1" align="center">
                            {product?.price + ' грн'}
                        </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <Button
                        size="small"
                        variant="contained"
                        fullWidth
                        onClick={ ()=> dispatch(CartAdd({good:product, count: 1}))}
                    >
                        <ShoppingBasketSharp sx={{ mr: 1 }} />В корзину
                    </Button>
                </CardActions>

            </Card>
        </Grid>
    )}

export default CardProduct