text: import React from 'react';
  import PropTypes from 'prop-types';
  import { TASK_STATE_ARCHIVED } from '../../lib/constants';
  
  const Task = ({ task: { id, title, state }, onArchiveTask, onPinTask }) => {
    return (
      <div className={`list-item ${state}`}>
        <label className="checkbox">
          <input
            type="checkbox"
            defaultChecked={state === TASK_STATE_ARCHIVED}
            disabled={true}
            name="checked"
          />
          <span className="checkbox-custom" onClick={() => onArchiveTask(id)}/>
        </label>
        <div className="title">
          <input
            type="text"
            value={title}
            readOnly={true}
            placeholder="Input title"
            style={{ textOverflow: 'ellipsis' }}
          />
        </div>
  
        <div className="actions" onClick={event => event.stopPropagation()}>
          {state !== TASK_STATE_ARCHIVED && (
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            <a onClick={() => onPinTask(id)}>
              <span className={`icon-star`}/>
            </a>
          )}
        </div>
      </div>
    );
  }
  
  Task.propTypes = {
    /** Composition of the task */
    task: PropTypes.shape({
      /** Id of the task */
      id: PropTypes.string.isRequired,
      /** Title of the task */
      title: PropTypes.string.isRequired,
      /** Current state of the task */
      state: PropTypes.string.isRequired,
    }),
    /** Event to change the task to archived */
    onArchiveTask: PropTypes.func,
    /** Event to change the task to pinned */
    onPinTask: PropTypes.func,
  };
  
  export default Task;
  