"use client";
import ErrorBoundary from "@/components/ErrorBoundary";
import FilterBar from "@/components/projects/FilterBar";
import React, { lazy, Suspense, useState } from "react";
import ProjectListSkeleton from "./ProjectListSkeleton";
import useHandleParams from "@/hooks/useHandleParams";
import { EmplyPlaceHolder, EmptyContent, EmptyIcon, EmptyTitle } from "@/components/EmplyPlaceHolder";
const ProjectsList = lazy(() => import("./ProjectsList"));
const PaginationComponent = lazy(() => import("./Pagination"));

const ErrorProjectsFallback=()=>{
  return (
    <div className="min-h-[60vh] grid place-content-center">
            <EmplyPlaceHolder>
          <EmptyIcon iconName="error" />
          <EmptyTitle className="text-base">Ocurrió un error</EmptyTitle>
          <EmptyContent className="text-xs">
            Por favor, revisa tu conexión a internet o intenta más tarde.
          </EmptyContent>
        </EmplyPlaceHolder>
          </div>
  )
}

const ProjectPage = () => {
  const { getAllParams } = useHandleParams();
  const searchParams = getAllParams() || {};
  const { status, range, page, q } = searchParams;

  return (
    <section className="w-full ">
      <div className=" min-h-[80vh]  relative ">
        <FilterBar />

        <ErrorBoundary fallback={<ErrorProjectsFallback/>}>
          <Suspense
            key={`type=${page}-${status}-${range}-${q}`}
            fallback={<ProjectListSkeleton />}
          >
            <ProjectsList searchParams={searchParams} />
          </Suspense>
        </ErrorBoundary>
        <div className="absolute bottom-0 right-0 ">
          <ErrorBoundary>
            <Suspense
              key={`type=${page}-${status}-${range}-${q}`}
              fallback={<p>Loading...</p>}
            >
              <PaginationComponent searchParams={searchParams} />
            </Suspense>
          </ErrorBoundary>
        </div>
      </div>
    </section>
  );
};

export default ProjectPage;