import React from 'react'
import PropTypes from 'prop-types'
import { ImageBackground } from 'react-native'

import { staticStyles } from './styles'

/**
 * Fallback renderer for the background image layer. Used when the requested
 * `resizeMode` is not `contain`, or when `position`/`align` are missing.
 * Matches the original `SetBackgroundImage` fallback path on both platforms.
 */
export const FallbackImageBackground = ({
  src,
  alt,
  resizeMode,
  adjustedBorderRadius,
  content,
  testID
}) => (
  <ImageBackground
    source={src}
    imageStyle={{ borderRadius: adjustedBorderRadius }}
    resizeMode={resizeMode}
    style={staticStyles.imageBackground}
    accessible={true}
    accessibilityLabel={alt}
    testID={testID}
  >
    {content}
  </ImageBackground>
)

FallbackImageBackground.propTypes = {
  src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
  alt: PropTypes.string,
  resizeMode: PropTypes.string,
  adjustedBorderRadius: PropTypes.number,
  content: PropTypes.node,
  testID: PropTypes.string
}