"use client";

import { trpc } from "@/app/_trpc/client";
import {
  EmplyPlaceHolder,
  EmptyContent,
  EmptyIcon,
  EmptyTitle,
} from "@/components/EmplyPlaceHolder";
import TaskHeaderList from "@/components/tasks/TaskHeaderList";
import TaskRowList from "@/components/tasks/TaskRowList";
import { Table, TableBody } from "@/components/ui/table";

const TaskListTable = ({
  searchParams,
}: {
  searchParams: Record<string, any>;
}) => {
  const [tasks] = trpc.tasks.getProjectTasks.useSuspenseQuery({...searchParams,searchQuery:searchParams?.q}, {
    refetchOnMount: false,    
  });


  if (!tasks?.length) {
    return (
      <div className="min-h-[55vh] grid place-content-center">
        <EmplyPlaceHolder>
          <EmptyIcon iconName="notFoundCat"  className="text-primary/80" />
          <EmptyTitle className="mt-1" >No tienes tareas asignadas!</EmptyTitle>
        </EmplyPlaceHolder>
      </div>
    ); 
  }
 


  return (
    <section className=" pt-3 space-y-7">
      {tasks?.map((project) => {
        return (
          <div key={project?.id}>
            <h3 className="text-base md:text-xl font-semibold capitalize mb-3">
              {project?.name}
            </h3>
            <Table className="">
              <TaskHeaderList />

              <TableBody className="">
                {project?.task?.map((task) => (
                  <TaskRowList key={task?.id} task={task as any} />
                ))}
              </TableBody>
            </Table>
          </div>
        );
      })}
    </section>
  );
};

export default TaskListTable;