// components/Hello.tsx
import React, {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import {StatusBar, Platform, StatusBarProps} from 'react-native';
import {useIsFocused} from '@react-navigation/native';
import helper from '../helper/helper';
export interface Props {
  backgroundColor: string;
  dark: Boolean;
}

const FocusAwareStatusBar = (props: StatusBarProps) => {
  const isFocused = useIsFocused();
  return isFocused ? <StatusBar {...props} /> : null;
};
const MyStatusbar: React.FC<Props> = props => {
  const height = helper.statusBarHeight;
  const data: StatusBarProps = {
    backgroundColor: props.backgroundColor
      ? props.backgroundColor
      : 'rgba(0,0,0,0)',
    barStyle: props.dark ? 'dark-content' : 'light-content',
    translucent: true,
  };
  console.log('height', height);
  return (
    <View
      style={{
        backgroundColor: props.backgroundColor,
        height: height,
        width: '100%',
      }}>
      <FocusAwareStatusBar {...data} />
    </View>
  );
};

// styles
const styles = StyleSheet.create({});

export default MyStatusbar;