import { useMemo } from "react";
import { useIsMobile } from "./use-is-mobile";
import useRouterConfig from "@/features/core/hooks/use-router-config";

const useAppShellHeight = () => {
  const isMobile = useIsMobile();
  const { header } = useRouterConfig();

  const height = useMemo(() => {
    const appShellBottomPadding = isMobile ? "70px" : "0px";
    const pageBottomPadding = "20px";
    // const mobileNavbar = isMobile && !header.collapsed ? "4rem" : "0px";
    const pullablePadding = "1.285rem";

    return `calc(100dvh - var(--app-shell-header-height, 0px) - ${pullablePadding} - ${appShellBottomPadding} - ${pageBottomPadding})`;
  }, [isMobile, header.collapsed]);

  return height;
};

export default useAppShellHeight;