/* eslint-disable react/prop-types */
import { Button, Card, CardContent, CardMedia, Typography } from '@mui/material'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addToCart, selectIsProductInCart } from '../../redux-store/CartStore/ducs'
import Swal from 'sweetalert2'

// eslint-disable-next-line react/prop-types
const ShopCard = ({ item }) => {
  const dispatch = useDispatch()
  const isProductInCart = useSelector(selectIsProductInCart(item._id))

  const handleAddToCart = () => {
    if (!isProductInCart) {
      dispatch(addToCart(item))
      Swal.fire('Product added to cart ')
    }
  }
  return (
    <div>
      <Button
        variant="contained"
        color="primary"
        // fullWidth
        disabled={isProductInCart}
        onClick={handleAddToCart}
        sx={{ marginTop: '10px' }}
      >
        {isProductInCart ? 'Already in Cart' : 'Add to Cart'}
      </Button>
    </div>
  )
}

export default ShopCard