import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import type { MembershipClubChargeCenter } from "@/lib/features/charge-centers/models";
import { searchMembershipChargeCenters } from "@/lib/features/charge-centers/query";
import type { CoreResponse } from "@/lib/features/types";
import type { Route } from "../../../layouts/+types/members.layout";
import ChargeCenterClientPage from "./_client";

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

export async function loader() {
  const searchResponse = await searchMembershipChargeCenters();
  return searchResponse;
}

const ChargeCentersPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { data } = loaderData as unknown as CoreResponse<
    MembershipClubChargeCenter[]
  >;
  return (
    <ChargeCenterClientPage
      tableProps={{ data: data ?? [], totalRows: data?.length ?? 0 }}
    />
  );
};

export default ChargeCentersPage;