import React, { useContext } from 'react'

import { PresentationOverridesContext } from '../../context'

import type { PresentationOverrideTypes } from '../../context'

export const FallbackImageOverrideWrapper: PresentationOverrideTypes['FallbackImage'] =
  ({ children, ...props }) => {
    const { FallbackImage } = useContext(PresentationOverridesContext)

    return FallbackImage ? (
      <FallbackImage {...props}>{children}</FallbackImage>
    ) : (
      children
    )
  }

export const ImageSetOverrideWrapper: PresentationOverrideTypes['ImageSet'] = ({
  children,
  ...props
}) => {
  const { ImageSet } = useContext(PresentationOverridesContext)

  return ImageSet ? <ImageSet {...props}>{children}</ImageSet> : children
}

export const PictureOverrideWrapper: PresentationOverrideTypes['Picture'] = ({
  children,
  ...props
}) => {
  const { Picture } = useContext(PresentationOverridesContext)

  return Picture ? <Picture {...props}>{children}</Picture> : children
}