import { useContext } from 'react';

import CartContext from '../../store/cart-context';
import classes from './EventItem.module.css';

function EventItem({ event }) {
  const cartCtx = useContext(CartContext);

  const isInCart = cartCtx.items.some((item) => item.id === event.id);

  let buttonCaption = 'Dodaj do koszyka';
  let buttonAction = () => cartCtx.addItem(event);

  if (isInCart) {
    buttonCaption = 'Usuń z koszyka';
    buttonAction = () => cartCtx.removeItem(event.id);
  }

  return (
    <li className={classes.event}>
      <img src={event.image} alt={event.title} />
      <div className={classes.content}>
        <h2>{event.title}</h2>
        <p className={classes.price}>{event.price} zł</p>
        <p>{event.description}</p>
        <div className={classes.actions}>
          <button onClick={buttonAction}>{buttonCaption}</button>
        </div>
      </div>
    </li>
  );
}

export default EventItem;
