'use client';

import { trpc } from "@/app/_trpc/client";
import { Button } from "@/components/ui/button";
import useHandleParams from "@/hooks/useHandleParams";

const ResultsSearch = ({ searchParams }: { searchParams: Record<string,any> }) => {
  const { getParam,removeParam} = useHandleParams();
  
  const { data: tasks, error, isFetching } = trpc.tasks.getProjectTasks.useQuery({...searchParams,searchQuery:searchParams?.q}, {
    refetchOnMount: false,
    refetchOnWindowFocus: false
  });

  return (
    <div className="pl-1 mt-5 flex items-center justify-between">
      {
        getParam('q') && !isFetching && tasks?.length! > 0 ? (
          <div>
            <span className="font-semibold mr-2">Resultados para:</span>
            <span className="font-light">{getParam('q')}</span>
          </div>
        ):null
      }
       {
        getParam('q') && !isFetching && tasks?.length! === 0  ? (
          <div>
            <span className="font-semibold mr-2">Sin resultados para:</span>
            <span className="font-light">{getParam('q')}</span>
          </div>
        ):null
      }
       {
              searchParams?.q && (  <Button variant="destructive" size="sm" className="rounded-2xl" onClick={()=>removeParam('q')}>
              x Limpiar filtros
            </Button>)
            }
    </div>
  );
};

export default ResultsSearch;