import { BuildTable } from "@/components/blocks/Table/table";
import type { MembershipClub } from "@/lib/features/membership-clubs/models";
import { Button, Flex, Stack, Title } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import type { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
import { useNavigate } from "react-router";

const columns: MRT_ColumnDef<MembershipClub>[] = [
  {
    accessorKey: "clubID",
    header: "Club ID",
  },
  {
    accessorKey: "clubName",
    header: "Club Name",
  },
  {
    accessorKey: "account_type_name",
    header: "Membership Name",
  },
];
const MembershipClubsClientPage: React.FC<{
  tableProps: { data: MembershipClub[]; totalRows: number };
}> = ({ tableProps }) => {
  const navigate = useNavigate();
  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as MembershipClub;
    void navigate(`${row.id}`);
  };
  return (
    <Stack>
      <Flex justify={"space-between"} align={"center"}>
        <Title order={6}>Membership Clubs</Title>
        <Button
          variant="filled"
          bg={"blue.1"}
          c={"blue.9"}
          onClick={() => {
            void navigate(`new`);
          }}
        >
          <IconPlus size={12} />
          Add a new club
        </Button>
      </Flex>
      <BuildTable
        data={tableProps.data}
        columns={columns}
        totalRows={tableProps.totalRows}
        onRowClick={handleRowClick}
      />
    </Stack>
  );
};

export default MembershipClubsClientPage;