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

const ProjectOverview = ({project}) =>
{
  const {projectEmployees} = useEmployeesByProjectAllocated( project?.id );
  let teamSize = projectEmployees.filter( ( emp ) => emp.isActive )

  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>13.5k</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>146</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>{ teamSize?.length}</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default ProjectOverview;
