"use client";

import { PageError } from "@/components/page-error";
import { PageLoader } from "@/components/page-loader";
import { UseTaskId } from "@/features/tasks/hooks/use-task-id";
import { useGetTask } from "@/features/tasks/api/use-get-task";
import { DottedSeparator } from "@/components/dotted-separator";
import { TasksBreadcrumbs } from "@/features/tasks/components/tasks-breadcrumbs";
import { TaskOverview } from "@/features/tasks/components/task-overview";
import { TaskDescription } from "@/features/tasks/components/task-description";

export const TaskIdClient = () => {
  const taskId = UseTaskId();
  const { data, isLoading } = useGetTask({ taskId });

  if (isLoading) {
    return <PageLoader />
  }

  if (!data) {
    return <PageError message="Task not found" />
  }

  return (
    <div className="flex flex-col">
      <TasksBreadcrumbs project={data.project} task={data} />
      <DottedSeparator className="my-6" />
      <TaskOverview task={data} />
      <div className="grid grid-cols-1 lg:grid-cols-1 gap-4 mt-4">
        <TaskDescription task={data} />
      </div>
    </div>
  )
}
