import React from 'react';

import Modal from '../../../components/Modal.js';

const CategoryModal = props => {
  const content = (
    <>
      <div className="modal__header">
        <h1 className="h1 modal__title">Delete category</h1>
      </div>

      <div className="modal__content">
        <p className="p">Are you sure you want to delete {props.category.name}?</p>
        <small className="small">
          Collection rules coupled to this category will not be deleted but will have no
          category
        </small>
      </div>

      <div className="modal__footer">
        <button className="button button--confirm" onClick={props.handleCancel}>
          Cancel
        </button>
        <button
          className="button button--error"
          onClick={() => props.handleDelete(props.category.pk)}
        >
          Delete category
        </button>
      </div>
    </>
  );

  return <Modal content={content} />;
};

export default CategoryModal;
