/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useState, useEffect } from "react";
import { router } from "@inertiajs/react";
import styles from "./members-projects.module.scss";

import HomeProjectCard from "@/components/homepages/home-project-cards";
import Pagination from "@/components/dashboard/pagination";
import { usePaginatedData } from "@/hooks/usePaginatedData";
import NoResults from "@/components/dashboard/no-results";

export default function MembersProjectsComponent({
  projects,
  perPage: initialPerPage = 10
}: any) {

  /* ================= STATE ================= */
  const [loading, setLoading] = useState(true);

  const { handlePageChange } = usePaginatedData(initialPerPage);

  /* ================= FAKE LOADING ================= */
  useEffect(() => {
    const t = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className={styles.page}>
      
      {/* ================= HEADER / FILTER AREA ================= */}
      <div className={styles.topBar}>

      </div>

      {/* ================= GRID ================= */}
      <div className={styles.grid}>
        {loading ? (
          /* 🔥 SKELETON */
          Array.from({ length: 6 }).map((_, i) => (
            <HomeProjectCard key={i} loading />
          ))
        ) : (
          projects.data.length > 0 &&
          projects.data.map((project: any) => (
            <HomeProjectCard
              route={(p) => `/member/projects/${p.id}`}
              key={project.id}
              project={project}
            />
          ))
        )}
      </div>

      {/* ================= EMPTY ================= */}
      {!loading && projects?.data?.length === 0 && (
        <NoResults
          title="No Projects Found"
          remark="Oops! No projects seem to match your criteria. Try adjusting your filters."
        />
      )}

      {/* ================= PAGINATION ================= */}
      {!loading && (
        <div className={styles.pagination}>
          <Pagination links={projects?.links} onChange={handlePageChange} />
        </div>
      )}
    </div>
  );
}