"use client";

import { EmployeePendingTasksWidget } from "./EmployeePendingTasksWidget";
import { EmployeeTaskStatsCards } from "./EmployeeTaskStatsCards";
import { EmployeeTaskTrendChart } from "./EmployeeTaskTrendChart";
import { useTaskSocket } from "@/hooks/useTaskSocket";
import { useAppSelector } from "@/lib/store";

export function EmployeeDashboard() {
  const orgId = useAppSelector((s) => s.auth.user?.organizationId);
  useTaskSocket(orgId, [
    "employee-tasks",
    "employee-dashboard-task-stats",
    "employee-dashboard-task-trend",
  ]);
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-foreground">
          My Dashboard
        </h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          Overview of your assigned tasks and activity
        </p>
      </div>
     <EmployeeTaskStatsCards />
  

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
        <EmployeeTaskTrendChart />
           <EmployeePendingTasksWidget />
      </div>
    </div>
  );
}