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

import { useState } from "react";
import MembersLayout from "@/layouts/members";
import DashboardHeader from "@/components/shared/DashPageHeader";
import styles from "./members-projects.module.scss";
import MembersProjectsComponent from "@/components/members/members-projects";

const MembersProjects = ({ projects, branches }: any) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className={styles.page}>
      {/* ================= HEADER ================= */}
      <DashboardHeader
        title="Church Projects"
        description="Explore all central church projects across branches"
      />

      {/* ================= PROJECTS LIST ================= */}
      <div className={styles.projectsSection}>
        <MembersProjectsComponent
          projects={projects}
          branches={branches}
        />
      </div>
    </div>
  );
};

MembersProjects.layout = (page: any) => (
  <MembersLayout title="Church Projects">{page}</MembersLayout>
);

export default MembersProjects;