import { AddShoppingCart } from "@mui/icons-material";
import { Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import Item from "../components/Item";
import { useBasket } from "./BasketProvider";

export default function ItemCard({ item }: { item: Item }) {
    const navigate = useNavigate()
    const { addToBasket } = useBasket();

    const handleAddToCart = () => {
        addToBasket(item.id, 1);
        console.log(`Added ${1} of ${item.name} to basket`);
    };

    const handleClick = () => {
        navigate(`/product/${item.id}`, { state: { item } });
    }

    return (
        <Paper elevation={3}>
            <Card>
                <CardActionArea onClick={handleClick}>
                    <CardMedia
                        component="img"
                        height="140"
                        image="src//assets/HTW.jpg"
                        alt="HTW Logo"
                    />
                    <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                            {item.name}
                        </Typography>
                        <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
                        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                            {item.description}
                        </Typography>
                        <IconButton color="primary" aria-label="add to shopping cart" onClick={handleAddToCart}>
                            <AddShoppingCart />
                        </IconButton>
                        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                            {item.price * (1 - item.discount / 100)} €
                        </Typography>
                    </CardContent>
                </CardActionArea>
            </Card>
        </Paper>
    )
}