import React, { CSSProperties, useEffect, useState } from "react";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
interface OuiSafeAreaProps {
  style?: CSSProperties;
}
class OuiSafeAreaStyle {
  height: string;
}
function OuiSafeArea({ style }: OuiSafeAreaProps) {
  const [ouiSafeAreaStyle, setOuiOuiSafeAreaStyle] =
    useState<OuiSafeAreaStyle>();

  useEffect(() => {
    const windowInfo = Taro.getWindowInfo();
    setOuiOuiSafeAreaStyle({
      height: `${
        windowInfo.screenHeight - (windowInfo.safeArea?.bottom || 0)
      }px`,
    });
  });

  return (
    <View
      className="oui-safearea"
      style={{ ...ouiSafeAreaStyle, ...style }}
    ></View>
  );
}

export default OuiSafeArea;