import Taro from '@tarojs/taro';

import classNames from 'classnames';
import { PropsWithChildren } from 'react';

import useNavigation from '@/hooks/use-navigation';

import './index.less';

interface IProps extends PropsWithChildren {
  className?: string;
}

const PREFIX = 'bl-navigation-bar';

function CustomNavigationBar(props: IProps) {
  const { className, children } = props;
  const { barHeight, statusBarHeight } = useNavigation();

  return (
    <div
      className={classNames(PREFIX, className)}
      style={{ height: Taro.pxTransform(barHeight.current), paddingTop: statusBarHeight.current }}
    >
      {children}
    </div>
  );
}

export default CustomNavigationBar;
