import React from "react";
import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";

const ProjectOverview = ({project}) =>{
  const {projects} = useProjects()

  const project_detail = projects.find( ( pro ) => pro.id == project )
  return (
    <div className="card mb-6">
      <div className="card-body">
        <small className="card-text text-uppercase text-muted small">
          Overview
        </small>
        <ul className="list-unstyled mb-0 mt-3 pt-1">
          <li className="d-flex align-items-center mb-4">
            <i className="bx bx-check"></i>
            <span className="fw-medium mx-2">Task Planned:</span>{" "}
            <span>{project_detail?.plannedWork
            }</span>
          </li>
          <li className="d-flex align-items-center mb-4">
            <i className="bx bx-star"></i>
            <span className="fw-medium mx-2">Task Completed:</span>{" "}
            <span>{project_detail?.completedWork }</span>
          </li>
          <li className="d-flex align-items-center">
            <i className="bx bx-user"></i>
            <span className="fw-medium mx-2">Current team Size:</span>{" "}
            <span>{project_detail?.teamSize}</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default ProjectOverview;