import type { MembershipClub } from "@/lib/features/membership-clubs/models";
import { searchMembershipClubs } from "@/lib/features/membership-clubs/query";
import type { CoreAPIPagination, CoreResponse } from "@/lib/features/types";
import React from "react";
import type { Route } from "../+types/page";
import MembershipClubsClientPage from "./_client";
import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        {
          label: "Clubs",
        },
        {
          label: "Overview",
        },
      ]}
    />
  ),
};

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get("page") ?? "1");
  const pageSize = parseInt(url.searchParams.get("pageSize") ?? "15");
  const search = url.searchParams.get("search") ?? undefined;
  const searchResponse = await searchMembershipClubs(page, pageSize, search);
  return searchResponse;
}

const MembershipClubsPage: React.FC<Route.ComponentProps> = ({
  loaderData,
}) => {
  const { data, success } = loaderData as unknown as CoreResponse<{
    membershipClubs: MembershipClub[];
    pagination: CoreAPIPagination;
  }>;
  return (
    <MembershipClubsClientPage
      tableProps={{
        data: success ? data.membershipClubs : [],
        totalRows: data.pagination.total,
      }}
    />
  );
};

export default MembershipClubsPage;