import React, {PropsWithChildren} from 'react';
import {LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTheme} from '@shared/theme';

import {HEADER_HEIGHT_WITH_SAFE_AREA, styles} from './styles';

interface HeaderBoxProps extends PropsWithChildren {
  hasTopSafeArea?: boolean;
  onLayout?: (event: LayoutChangeEvent) => void;
  style?: StyleProp<ViewStyle>;
  hideBorder?: boolean;
}

export function HeaderBox({
  hasTopSafeArea = false,
  children,
  style,
  onLayout,
  hideBorder = false,
}: HeaderBoxProps) {
  const {theme} = useTheme();
  const {top} = useSafeAreaInsets();

  return (
    <View
      onLayout={onLayout}
      style={[
        styles.container,
        {
          backgroundColor: theme.background.layout.tertiary,
          borderColor: theme.border.neutral.default,
        },
        hasTopSafeArea && {
          ...styles.safeArea,
          paddingTop: top,
          height: HEADER_HEIGHT_WITH_SAFE_AREA + top,
        },
        hideBorder && styles.borderless,
        style,
      ]}>
      {children}
    </View>
  );
}
