import { CSSProperties, FC, PropsWithChildren } from "react";
import "./index.less";
import NavigationBar from "@/components/NavigationBar";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";

interface ContainerProps {
  style?: CSSProperties;
  className?: string;
  title?: string; //导航栏名称
}
/**
 * @description 页面通用容器，带滚动和固定自定义导航栏
 * 注意：在自己的页面配置config中设置disableScroll为true
 */
const Container: FC<PropsWithChildren<ContainerProps>> = (props) => {
  const { children, style, className, title } = props;
  const cachet = Taro.getMenuButtonBoundingClientRect();
  return (
    <View className={`wrap ${className ?? "_"}`} style={style}>
      <NavigationBar title={title ?? ""} />
      <View
        className="content"
        style={{ "--h": cachet.top + 56 + "px" } as CSSProperties}
      >
        {children}
      </View>
    </View>
  );
};
export default Container;
