import React from "react";
import {
  useDashboardProjectsCardData,
  useDashboardTeamsCardData,
  useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data";
import Projects from "./Projects";
import Teams from "./Teams";
import TasksCard from "./Tasks";
import ProjectCompletionChart from "./ProjectCompletionChart";
import ProjectProgressChart from "./ProjectProgressChart";

const Dashboard = () => {
  const { projectsCardData } = useDashboardProjectsCardData();
  const { teamsCardData } = useDashboardTeamsCardData();
  const { tasksCardData } = useDashboardTasksCardData();

  return (
    <div className="container-xxl flex-grow-1 container-p-y">
      <div className="row gy-4">
        {/* Projects Card */}
        <div className="col-sm-6 col-lg-4">
          <Projects projectsCardData={projectsCardData} />
        </div>

        {/* Teams Card */}
        <div className="col-sm-6 col-lg-4">
          <Teams teamsCardData={teamsCardData} />
        </div>

        {/* Tasks Card */}
        <div className="col-sm-6 col-lg-4">
          <TasksCard tasksCardData={tasksCardData} />
        </div>

        {/* Bar Chart (Project Completion) */}
        <div className="col-xxl-6 col-lg-6">
          <ProjectCompletionChart />
        </div>

        {/* Line Chart (Project Progress) */}
        <div className="col-xxl-6 col-lg-6">
          <ProjectProgressChart />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;