"use client";
import { DashBoardWidgetsPage } from "./components/Widgets";
import ProjectsByStatusChartPage from "./components/ProjectsbyStatusChart/page";
import { ChevronRight } from "lucide-react";
import { Button } from "ikoncomponents";
import CurrentMonthMilestones from "./components/milestone/page";
import ProjectTimelineChart from "./components/activeProjectTimeLine";
import { useRouter } from "next/dist/client/components/navigation";

function DashboardPage() {
   const router = useRouter();

  const handleRedirect = () => {
    router.push("/main/planning/projects");
  };
  return (
    <div className="h-full mt-2 space-y-4 overflow-y-auto">
      {/* Header */}
      <div className="flex justify-between items-start">
        <div>
          <h1 className="text-2xl font-bold">Dashboard</h1>
          <p className="text-gray-500 text-sm">
            Consolidated project portfolio overview
          </p>
        </div>
        <Button
          size="sm"
          variant={"secondary"}
          className="flex items-center gap-2 px-3 py-1.5 rounded-md text-xs"
          onClick={handleRedirect}
        >
          View All Projects <ChevronRight size={14} />
        </Button>
      </div>

      {/* Widgets Row */}
      <DashBoardWidgetsPage />

      {/* Main Content Grid */}
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="h-full">
          <CurrentMonthMilestones />
        </div>

        <div className="h-full">
          <ProjectsByStatusChartPage />
        </div>
      </div>
      <ProjectTimelineChart />
    </div>
  );
}

export default DashboardPage;