import { RecentActivity } from "@/components/dashboard/activity";
import { AppOverview } from "@/components/dashboard/appOverview";
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
import { Notifications } from "@/components/dashboard/notifications";
import { QuickActions } from "@/components/dashboard/quickActions";
import { TaskQueue } from "@/components/dashboard/taskQueue";
import { tw } from "@/utils/tailwind";

interface DashboardCardProps {
  children?: React.ReactNode;
  rowSpan?: number;
  sx?: string;
}
const DashboardCard = (props: DashboardCardProps) => {
  const { children, rowSpan, sx = "" } = props;
  return (
    <div
      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
    >
      {children}
    </div>
  );
};

interface DashboardPanelProps {
  children?: React.ReactNode;
}
const DashboardPanel = (props: DashboardPanelProps) => {
  const { children } = props;
  return (
    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
  );
};

export default function Dashboard() {
  return (
    <div className="flex h-screen w-full">
      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
        <DashboardCard rowSpan={2}>
          <NetworkOverview />
        </DashboardCard>
        <DashboardCard rowSpan={2}>
          <RecentActivity />
        </DashboardCard>
        <DashboardCard>
          <Notifications />
        </DashboardCard>
        <DashboardCard>
          <QuickActions />
        </DashboardCard>
        <DashboardPanel>
          <AppOverview />
        </DashboardPanel>
        <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
          <TaskQueue />
        </DashboardCard>
      </div>
    </div>
  );
}