import { AppShell, Breadcrumbs, Flex, Group } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import React from "react";
import { useMatches } from "react-router";
import { AdminUserMenu } from "./console.menu";
import { NotificationsBell } from "@/components/NotificationsBell";

// const items = [
//   { title: "Members", href: "#" },
//   { title: "Overview", href: "#" },
// ].map((item, index) => (
//   <NavLink
//     to={item.href}
//     key={index}
//     style={() => ({ textDecoration: "none", backgroundColor: "yellow" })}
//   >
//     <Text c={"blue.10"}>{item.title}</Text>
//   </NavLink>
// ));

type BreadcrumbHandle = {
  breadcrumb?: (match: any) => React.ReactNode;
};

const ConsoleHeader = () => {
  const matches = useMatches() as Array<{
    handle?: BreadcrumbHandle;
    pathname: string;
  }>;
  return (
    <AppShell.Header px={28} h={50}>
      <Flex w={"100%"} h={"100%"} justify={"space-between"} align={"center"}>
        <Flex>
          <Breadcrumbs
            separator={<IconChevronRight size={14} />}
            separatorMargin={5}
          >
            {matches
              .filter((match) => match.handle && match.handle?.breadcrumb)
              .map((match, index) => (
                <React.Fragment key={index}>
                  {match.handle!.breadcrumb!(match)}
                </React.Fragment>
              ))}
          </Breadcrumbs>
        </Flex>
        <Group gap="sm" align="center">
          <NotificationsBell />
          <AdminUserMenu />
        </Group>
      </Flex>
    </AppShell.Header>
  );
};
export default ConsoleHeader;