import React, { useState, useEffect } from "react";
import { PmsGrid } from "../../../services/pmsGrid";
// import { GridService } from "./gridService";
// import TaskTable from "./TaskTable";

export default function WorkAreaTable({ workAreas }) {
  const [taskData, setTaskData] = useState({}); // workAreaId → tasks

  const columns = [
    { key: "areaName", title: "Work Area", },
    { key: "plannedWork", title: "Planned Work" },
    { key: "completedWork", title: "Completed Work" },
    { key: "percentage", title: "Completion %" },
  ];

//   const loadTasks = async (workAreaId) => {
//     if (!taskData[workAreaId]) {
//       const res = await GridService.getTasksByWorkArea(workAreaId);
//       setTaskData((prev) => ({ ...prev, [workAreaId]: res }));
//     }
//   };

  return (
    <PmsGrid
      columns={columns}
      data={workAreas}
      rowKey="id"
      features={{
        expand: true,
        pinning: true,
        resizing: true,
      }}
    //   renderExpanded={(area) => {
    //     loadTasks(area.id);
    //     return <TaskTable tasks={taskData[area.id]} />;
    //   }}
    />
  );
}