import React,{useEffect} from "react";
import WorkItem from "./WorkItem";

const WorkArea = ( {workArea, floor, forBuilding} ) =>
{
  useEffect(() => {

  }, [workArea]); 
  return (
    <React.Fragment key={workArea.id}>
      <tr>
        <td colSpan="4" className="text-start table-cell">
          <div className="row ps-2">
            <div className="col-6">
              <h6>
                <span>
                  {floor.floorName} - {workArea.areaName} &nbsp;
                </span>
              </h6>
            </div>
          </div>
        </td>
      </tr>

      {workArea?.workItems && workArea.workItems.length > 0 ? (
        <tr className="overflow-auto">
          <td colSpan={4}>
            <table className="table mx-1">
              <thead>
                <tr>
                  <th>Activity</th>
                  {/* for mobile view */}
                  <th className="d-sm-none d-sm-table-cell">Status</th>
                  {/* for greather than mobile view ************* */}
                  <th className="d-none d-md-table-cell">Planned</th>
                  <th className="d-none d-md-table-cell">Completed</th>
                  {/* ************************** */}
                  <th>Progress</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody className="table-border-bottom-0">
                {workArea?.workItems && workArea.workItems.length > 0 ? (
                  workArea.workItems.map((workItem) => (
                    <WorkItem key={workItem.workItemId} workItem={workItem} />
                  ))
                ) : (
                  <tr>
                    <td colSpan="4" className="text-center">
                      No Data
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </td>
        </tr>
      ) : null}
    </React.Fragment>
  );
};
export default WorkArea;
