import React, { CSSProperties, useEffect, useState } from "react";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
interface OuiStatusbarProps {
  style?: CSSProperties;
}
class OuiStatusbarStyle {
  height: string;
}
function OuiStatusbar({ style }: OuiStatusbarProps) {
  const [ouiStatusbarStyle, setOuiOuiStatusbarStyle] =
    useState<OuiStatusbarStyle>();

  useEffect(() => {
    const windowInfo = Taro.getWindowInfo();
    setOuiOuiStatusbarStyle({
      height: `${windowInfo.statusBarHeight}px`,
    });
  });

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

export default OuiStatusbar;