import { trpc } from "@/app/_trpc/client";
import React from "react";
import { StickyNote } from "lucide-react";
import { PanelsTopLeft } from "lucide-react";
import { House } from "lucide-react";



 const UserMontlyActivity = () => {
  const [data] = trpc.users.getUserMonthActivity.useSuspenseQuery(undefined,{
    refetchOnMount:false,
    refetchOnWindowFocus:false
  });
  

  return (
    <div className="flex gap-2 justify-between flex-wrap" >
      <article className="bg-white px-2 md:px-6 py-3 rounded-md">
        <div className="gap-2">
          <h2 className="md:text-xl font-semibold mb-1">Tareas completadas </h2>
          <div className="flex gap-8 justify-between items-center">
            <div>
              <span className="text-xl md:text-3xl font-semibold">
                {data?.compleatedTasks || 0}
              </span>
            </div>
            <div className="p-2 md:p-5 bg-primary/25 rounded-xl">
              <StickyNote className="text-primary" />
            </div>
          </div>
        </div>
      </article>
      <article className="bg-white px-2 md:px-6 py-3 rounded-md">
        <div className="gap-2">
          <h2 className="md:text-xl font-semibold mb-1">Pisos</h2>
          <div className="flex gap-8 justify-between items-center">
            <div>
              <span className="text-xl md:text-3xl  font-semibold">{data?.floors || 0}</span>
            </div>
            <div className="p-2 md:p-5 bg-primary/25 rounded-xl">
              <PanelsTopLeft className="text-primary" />
            </div>
          </div>
        </div>
      </article>
      <article className="bg-white px-2 md:px-6 py-3 rounded-md">
        <div className="gap-2">
          <h2 className="md:text-xl font-semibold mb-1">Projectos</h2>
          <div className="flex gap-8 justify-between items-center">
            <div>
              <span className="text-xl md:text-3xl font-semibold">{data?.projects || 0}</span>
            </div>
            <div className="p-2 md:p-5 bg-primary/25 rounded-xl">
            <House className="text-primary"/>
            </div>
          </div>
        </div>
      </article>
    </div>
  );
};


export default UserMontlyActivity