import * as React from "react";
import NextLink from "next/link";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Box from "@mui/material/Box";

function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  event.preventDefault();
  console.info("You clicked a breadcrumb.");
}

export interface MdxBreadcrumbsProps {
  title: string;
  parents: {
    title: string;
    href: string;
  }[];
}

export function MdxBreadcrumbs(props: MdxBreadcrumbsProps) {
  const { title, parents } = props;

  return (
    <Box
      role="presentation"
      onClick={handleClick}
      sx={{
        pb: (theme) => theme.spacing(2),
        position: "sticky",
        top: "calc(64px + 4px)",
        backgroundColor: (theme) => theme.palette.background.paper,
        zIndex: 1,
      }}
    >
      <Breadcrumbs aria-label="breadcrumb">
        {parents.map((parent) => (
          <Typography
            key={parent.title}
            component={NextLink}
            href={parent.href}
          >
            {parent.title}
          </Typography>
        ))}
        <Typography color="text.primary">{title}</Typography>
      </Breadcrumbs>
    </Box>
  );
}