"use client";

import { AdminLayout } from "@/components/admin/layout";
import MemberList from "@/components/member/memberList";
import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useGetMembers } from "@/hooks/useMember";
export default function page() {
  const { data: membersData = [], isLoading, isError, error } = useGetMembers();
  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error: {error.message}</p>;
  return (
    <AdminLayout>
      <div className="pt-10">
        <h2 className="text-2xl font-bold mb-6 mt-10">Members List</h2>
        <div className="space-y-2">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="">Image</TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Role</TableHead>
                <TableHead className="">Email</TableHead>
                <TableHead className="">Phone</TableHead>
                <TableHead>Gender</TableHead>
                <TableHead>Rotary Year</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {membersData?.map((user: any) => (

                <MemberList key={user.id} user={user} />
              ))}
            </TableBody>
          </Table>

        </div>


      </div>
    </AdminLayout>
  );
}