import React from 'react';
import './userCard.css';

const UserCard = ({ user, deleteUser, setUserPopup, handleSwitchPopup }) => {

  const openPopup = (e) => {
    if (!e.target.classList.contains('btn')) {
      setUserPopup(user);
      handleSwitchPopup();
    }
  }

  return (
    <div className="user" onClick={openPopup}>
      <div className="user__body">
        <h3>{user.name}</h3>
        <h4>{user.surname}</h4>
        <p>{user.address}</p>
        <button type="button" className="btn" onClick={() => deleteUser(user.id)}>delete</button>
      </div>
    </div>
  );
}

export default UserCard;