import React from 'react';
import {StyleProp, View, ViewProps, ViewStyle} from 'react-native';
import {useKeyboardHeight} from '@hooks/useKeyboardHeight';
import {commonStyles} from '@shared/styles';

interface MarginKeyboardAwareViewProps extends Omit<ViewProps, 'style'> {
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
}

function MarginKeyboardAwareView({
  children,
  style,
  ...viewProps
}: MarginKeyboardAwareViewProps) {
  const keyboardHeight = useKeyboardHeight();

  return (
    <View
      style={[commonStyles.flex, {marginBottom: keyboardHeight}, style]}
      {...viewProps}>
      {children}
    </View>
  );
}

export {MarginKeyboardAwareView};