import { Box, Breadcrumbs, Link, Typography, Button } from "@mui/joy";
import ColorSchemeToggle from "~/components/ColorSchemeToggle";
import * as Icon from "react-feather";

export default function TopSection({ pageName, topSectionButton }) {
  return (
    <>
      <Box sx={{ display: "flex", alignItems: "center" }}>
        <Breadcrumbs
          size='sm'
          aria-label='breadcrumbs'
          separator={<Icon.ChevronRight />}
          sx={{
            "--Breadcrumbs-gap": "1rem",
            "--Icon-fontSize": "16px",
            fontWeight: "lg",
            color: "neutral.400",
            px: 0,
          }}
        >
          <Link
            underline='none'
            color='neutral'
            fontSize='inherit'
            href='#some-link'
            aria-label='Home'
          >
            <Icon.Home />
          </Link>

          <Typography fontSize='inherit' variant='soft' color='primary'>
            {pageName}
          </Typography>
        </Breadcrumbs>
        <ColorSchemeToggle
          sx={{ ml: "auto", display: { xs: "none", md: "inline-flex" } }}
        />
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          my: 1,
          gap: 1,
          flexWrap: "wrap",
          "& > *": {
            minWidth: "clamp(0px, (500px - 100%) * 999, 100%)",
            flexGrow: 1,
          },
        }}
      >
        <Typography level='h1' fontSize='xl4'>
          {pageName}
        </Typography>
        <Box sx={{ flex: 999 }} />
        <Box sx={{ display: "flex", gap: 1, "& > *": { flexGrow: 1 } }}>
          {topSectionButton}
        </Box>
      </Box>
    </>
  );
}