import * as React from 'react'
import {
  BackgroundMediaProps,
  BackgroundMediaAndImageAndVideoProps as AllProps,
} from './typings'
import { BackgroundWrap, LightFade, DarkFade } from './styled'
import { renderImageOrVideo } from './renderProps'

class BackgroundMedia extends React.PureComponent<BackgroundMediaProps> {
  render() {
    const { className, ...props } = this.props as AllProps
    const view = renderImageOrVideo(props)

    return (
      <BackgroundWrap className={className}>
        {view}
        <LightFade />
        <DarkFade />
      </BackgroundWrap>
    )
  }
}

export { BackgroundMedia }
export default BackgroundMedia