import React from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import { useProjects } from "../../hooks/useProjects";
import ProjectCompletionChartSkeleton from "../Charts/ProjectCompletionChartSkeleton";

const ProjectCompletionChart = () => {
  const { projects, loading } = useProjects();

  if (loading) return <ProjectCompletionChartSkeleton />;

  const projectNames = projects?.map((p) => p.name) || [];
  const projectProgress =
    projects?.map((p) => {
      const completed = p.completedWork || 0;
      const planned = p.plannedWork || 1;
      const percent = (completed / planned) * 100;
      return Math.min(Math.round(percent), 100);
    }) || [];

  return (
    <div className="card" style={{ minHeight: "490px" }}>
      <div className="card-header d-flex align-items-start justify-content-between">
        <div className="card-title mb-0 text-start">
          <h5 className="mb-1 fw-bold">Projects</h5>
          <p className="card-subtitle">Projects Completion Status</p>
        </div>
      </div>
      {/* Keep same minHeight as skeleton to avoid shrinking */}
      <div className="card-body" >
        <HorizontalBarChart
          categories={projectNames}
          seriesData={projectProgress}
          loading={loading}
        />
      </div>
    </div>
  );
};

export default ProjectCompletionChart;