text: import React from 'react';
  import { bindActionCreators } from 'redux';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import {
    MdRemoveCircleOutline,
    MdAddCircleOutline,
    MdDelete,
    MdRemoveShoppingCart,
  } from 'react-icons/md';
  import * as CartActions from '../../store/modules/cart/actions';
  import { formatPrice } from '../../util/format';
  import { Container, ProductTable, Total, EmptyContainer } from './styles';
  
  function Cart({ cart, total, removeFromCart, updateAmountRequest }) {
    function increment(product) {
      updateAmountRequest(product.id, product.amount + 1);
    }
  
    function decrement(product) {
      updateAmountRequest(product.id, product.amount - 1);
    }
  
    return (
      <Container>
        {cart.length ? (
          <>
            <ProductTable>
              <thead>
                <tr>
                  <th />
                  <th>PRODUTO</th>
                  <th>QTD</th>
                  <th>SUBTOTAL</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {cart.map((product) => (
                  <tr key={product.id}>
                    <td>
                      <img src={product.image} alt={product.title} />
                    </td>
                    <td>
                      <strong>{product.title}</strong>
                      <span>{product.priceFormatted}</span>
                    </td>
                    <td>
                      <div>
                        <button type="button" onClick={() => decrement(product)}>
                          <MdRemoveCircleOutline size={20} color="#7159c1" />
                        </button>
                        <input type="number" readOnly value={product.amount} />
                        <button type="button" onClick={() => increment(product)}>
                          <MdAddCircleOutline size={20} color="#7159c1" />
                        </button>
                      </div>
                    </td>
                    <td>
                      <strong>{product.subtotal}</strong>
                    </td>
                    <td>
                      <button
                        type="button"
                        onClick={() => removeFromCart(product.id)}
                      >
                        <MdDelete size={20} color="#7159c1" />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </ProductTable>
  
            <footer>
              <button type="button">Finalizar pedido</button>
  
              <Total>
                <span>TOTAL</span>
                <strong>{total}</strong>
              </Total>
            </footer>
          </>
        ) : (
          <EmptyContainer>
            <MdRemoveShoppingCart size={64} color="#eee" />
            <strong>Seu carrinho está vazio.</strong>
          </EmptyContainer>
        )}
      </Container>
    );
  }
  
  Cart.propTypes = {
    cart: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number.isRequired,
        image: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        price: PropTypes.number.isRequired,
        priceFormatted: PropTypes.string,
        amount: PropTypes.number.isRequired,
        subtotal: PropTypes.string,
      })
    ).isRequired,
    total: PropTypes.string.isRequired,
    removeFromCart: PropTypes.func.isRequired,
    updateAmountRequest: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = (state) => ({
    cart: state.cart.map((product) => ({
      ...product,
      subtotal: formatPrice(product.price * product.amount),
    })),
    total: formatPrice(
      state.cart.reduce((total, product) => {
        return total + product.price * product.amount;
      }, 0)
    ),
  });
  
  const mapDispatchToProps = (dispatch) =>
    bindActionCreators(CartActions, dispatch);
  
  export default connect(mapStateToProps, mapDispatchToProps)(Cart);
  