text: import React, { useState } from 'react';
  import { FaTrashAlt } from 'react-icons/fa';
  import PropTypes from 'prop-types';
  import { useProjectsValue, useSelectedProjectValue } from '../context';
  import { firebase } from '../firebase';
  
  export const IndividualProject = ({ project }) => {
    const [showConfirm, setShowConfirm] = useState(false);
    const { projects, setProjects } = useProjectsValue();
    const { setSelectedProject } = useSelectedProjectValue();
  
    const deleteProject = docId => {
      firebase
        .firestore()
        .collection('projects')
        .doc(docId)
        .delete()
        .then(() => {
          setProjects([...projects]);
          setSelectedProject('INBOX');
        });
    };
  
    return (
      <>
        <span className="sidebar__dot">•</span>
        <span className="sidebar__project-name">{project.name}</span>
        <span
          className="sidebar__project-delete"
          data-testid="delete-project"
          onClick={() => setShowConfirm(!showConfirm)}
          onKeyDown={() => setShowConfirm(!showConfirm)}
          tabIndex={0}
          role="button"
          aria-label="Confirm deletion of project"
        >
          <FaTrashAlt />
          {showConfirm && (
            <div className="project-delete-modal">
              <span className="project-delete-modal__inner">
                <p>Do you want to delete?</p>
                <button
                  type="button"
                  onClick={() => deleteProject(project.docId)}
                >
                  Delete
                </button>
                <span
                  onClick={() => setShowConfirm(!showConfirm)}
                  onKeyDown={() => setShowConfirm(!showConfirm)}
                  tabIndex={0}
                  role="button"
                  aria-label="Cancel adding project, do not delete"
                >
                  Cancel
                </span>
              </span>
            </div>
          )}
        </span>
      </>
    );
  };
  
  IndividualProject.propTypes = {
    project: PropTypes.object.isRequired,
  };
  