import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Box, Flex, useBreakpointValue } from "@chakra-ui/react";
import { Link, useParams } from "react-router-dom";

interface LinkChunk {
  name: string;
  link: string;
}

export default function MainHeader() {
  const { sectionId, moduleId } = useParams();
  const linkChunks: LinkChunk[] = [{ name: "Hi", link: "https://dunemask.net" }];

  return (
    <Box
      display="flex"
      width="100%"
      position="fixed"
      top="0"
      shadow="md" // Optional: Add shadow for better separation from other content
    >
      <Flex p={4} width="100%">
        <Breadcrumb separator="›">
          {linkChunks.map((lc, i) => (
            <BreadcrumbItem key={i}>
              <BreadcrumbLink as={Link} to={lc.link}>
                {lc.name}
              </BreadcrumbLink>
            </BreadcrumbItem>
          ))}
        </Breadcrumb>
      </Flex>
    </Box>
  );
}