import { 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("md"));

  return (
    <>
      {upMd ? (
        <NavbarFull isLoggedIn={isLoggedIn}>{children}</NavbarFull>
      ) : (
        <NavbarCollapsed isLoggedIn={isLoggedIn}>{children}</NavbarCollapsed>
      )}
    </>
  );
}