import React, { forwardRef } from 'react';
import { View } from 'react-native';
import Image from './Image';
import { ImageBackgroundProps } from './interface';
import styles from './style';

/**
 * ImageBackground 组件，支持在图片之上渲染子组件
 * 内部使用自定义的 Image 组件
 */
const ImageBackground = forwardRef<View, ImageBackgroundProps>((props, ref) => {
  const { children, style, imageStyle, containerProps, ...imageProps } = props;

  return (
    <View
      {...containerProps}
      ref={ref}
      style={[styles.backgroundContainer, style]}
    >
      <Image {...imageProps} style={[styles.backgroundImage, imageStyle]} />
      {children}
    </View>
  );
});

ImageBackground.displayName = 'ImageBackground';

export default ImageBackground;