"use client";

import type { ReactNode } from "react";
import { useParams } from "next/navigation";
import { ViewToolbar } from "@/components/views/config";
import { useViewStore } from "@/lib/stores/view-store";
import { useViewData } from "@/lib/hooks/use-view-data";

export default function ProjectLayout({ children }: { children: ReactNode }) {
  const params = useParams();
  const workspaceId =
    typeof params?.workspaceSlug === "string" ? params.workspaceSlug : undefined;
  const projectId =
    typeof params?.projectId === "string" ? params.projectId : null;

  const config = useViewStore((s) => s.config);
  const { total } = useViewData(config, workspaceId, projectId);

  return (
    <div className="flex h-full flex-col">
      <div className="shrink-0 border-b border-border px-4 pt-2">
        <ViewToolbar totalCount={total} />
      </div>
      <div className="flex-1 overflow-hidden">{children}</div>
    </div>
  );
}