import {Component} from "react";
import {View} from "@tarojs/components";
import './index.scss';
import Taro from "@tarojs/taro";

class XNav extends Component {

  static defaultProps = {
    backgroundColor: '#FFFFFF',
    position: 'block',
  }

  constructor(props) {
    super(props);
    this.state = {
      statusBarHeight: 0,
    };
  }

  componentDidMount() {
    const sysInfo = Taro.getSystemInfoSync();
    this.setState({ statusBarHeight: sysInfo.statusBarHeight });
  }

  render() {
    const { statusBarHeight } = this.state;
    return (
      <View class='x-nav-box' style={{
        paddingTop: `${statusBarHeight}px`,
        backgroundColor: this.props.backgroundColor,
        position: this.props.position,
      }}>
        <View class='cont'>
          { this.props.children }
        </View>
      </View>
    )
  }
}

export default XNav;
