import React from 'react'

function Projects(props) {
  console.log('PROJECTS PROPS', props)
  return (
    <div>
      <h3 className="mt-4">Projects</h3>
      <ul className="list-group">
        {props.projects.map(project => (
          <li className="list-group-item" key={project.id}>
            <button
              className="btn btn-outline-danger mr-1"
              onClick={() => props.deleteProject(project.id)}
            >
              X
            </button>
            {props.selectedProjectId ? null : (
              <span onClick={() => props.selectProject(project.id)}>
                {project.name}{' '}
              </span>
            )}
          </li>
        ))}
        <form className="" onSubmit={props.createProject}>
          <input
            className="form-control input-sm"
            placeholder="Create Project"
            name="newProject"
            value={props.newProject}
            onChange={props.handleChange}
          />
        </form>
      </ul>
    </div>
  )
}

export default Projects