import { AppShellSection, Box } from "@mantine/core";
import {
  IconBatteryVerticalCharging,
  IconBlocks,
  IconClubs,
} from "@tabler/icons-react";
import { Outlet } from "react-router";
import PageHeader from "./shared/page.header";

const BASE_PATH = "/admin/memberships";

const MembershipsLayout = () => {
  return (
    <AppShellSection>
      <PageHeader
        links={[
          {
            Icon: IconBlocks,
            label: "Account Types",
            href: BASE_PATH + "/account-types",
          },
          {
            Icon: IconClubs,
            label: "Clubs",
            href: BASE_PATH + "/clubs",
          },
          {
            Icon: IconBatteryVerticalCharging,
            label: "Charge Centers",
            href: BASE_PATH + "/charge-centers",
          },
          // {
          //   Icon: IconHours24,
          //   label: "Service Centers",
          //   href: BASE_PATH + "/service-centers",
          // },
          // {
          //   Icon: IconUsers,
          //   label: "Account Managers",
          //   href: BASE_PATH + "/account-managers",
          // },
        ]}
      />
      <Box py={20} px={28}>
        <Outlet />
      </Box>
    </AppShellSection>
  );
};

export default MembershipsLayout;