'use client'

import { trpc } from "@/app/_trpc/client";
import { Hotel, House } from "lucide-react";

const RecentCompleatedProjects = ({searchParams}:{searchParams:Record<string,any>}) => {
    const [projectsEarnings]=trpc.projects.getProjectEarningsYear.useSuspenseQuery(searchParams,{
      refetchOnMount:false,
    })
    
  return (
    <div className="p-5 h-full bg-white  rounded-xl shadow-md">
    <div>
      <h4 className="text-base font-bold">Projectos completados</h4>
      <p className=" text-sm text-gray-500 py-1 mb-3">
        Enero - hoy 2024
      </p>
    </div>
    <div className="space-y-1.5">
      {projectsEarnings?.projectsEarnings?.length === 0 && (
        <p className="text-center font-semibold mt-10 text-sm">
          Sin resultados...
        </p>
      )}
      {projectsEarnings?.projectsEarnings
        ?.slice(0, 5)
        ?.map((project) => {
          return (
            <article
              className="flex gap-1.5 items-center"
              key={project?.name}
            >
              <div>
                {project?.residence === "apartamento" ? (
                  <Hotel />
                ) : (
                  <House />
                )}
              </div>
              <div>
                <p className="text-sm">{project?.name}</p>
              </div>
            </article>
          );
        })}
    </div>
  </div>  )
}

export default RecentCompleatedProjects