import { View } from "@tarojs/components";
import React from "react";
import PageWrapper from "../page-wrapper/index";
import { useAppStore } from "@/store/appStore";

interface Props {
  children?: React.ReactChild | React.ReactChild[];
  bgColor?: string;
  isflex?: boolean; // 有横向滚动的scroll-view 容器不能包裹在 flex comlumn 布局中
  style?: React.CSSProperties;
  paddingTop?: number;
  fullPage?: boolean;
}

const Index: React.FC<Props> = ({ children, isflex = true, fullPage = false,  paddingTop, style }) => {
  const headerHeight = useAppStore((state) => state.headerHeight);
  const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
  const flexStyle = isflex ? "flex flex-col items-center" : "";
  const offsetTop = paddingTop ?? headerHeight;
  const pageHeight = fullPage ? `calc(100vh - ${bottomSafeHeight}px)` : 'auto'
  return (
    <PageWrapper style={style}>
      <View
          className={`${flexStyle} h-full w-full`}
          style={{ paddingTop: offsetTop, height: pageHeight}}
        >
          {children}
        </View>
    </PageWrapper>
  );
};

export default Index;