import { Box, useMediaQuery, useTheme } from "@mui/material";
import NavbarCollapsed from "./NavbarCollapsed";
import NavbarFull from "./NavbarFull";

import type { ReactNode } from "react";

interface Props {
  isLoggedIn: boolean;
  children: ReactNode;
}

export default function Navbar({ isLoggedIn, children }: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up(1000));

  return (
    <Box
      sx={{
        paddingTop: upMd ? "80px" : 0,
        width: "100%",
      }}
    >
      {upMd ? (
        <NavbarFull isLoggedIn={isLoggedIn}>{children}</NavbarFull>
      ) : (
        <NavbarCollapsed isLoggedIn={isLoggedIn}>{children}</NavbarCollapsed>
      )}
    </Box>
  );
}