import * as React from 'react'
import { styled } from 'styleh-components'
import { VideoPlayer as Video, VideoProps } from 'atoms/Video'

export const BackgroundVideo = (props: VideoProps) => (
  <Video shouldAutoPlay={true} {...props} />
)

export const StyledBackgroundVideo = styled(BackgroundVideo) `
  z-index: 1;
  top: 0;
  bottom: 0;
  object-fit: cover;
  height: 100%;
  position: relative;

  ::-webkit-media-controls-play-button,
  ::-webkit-media-controls-start-playback-button {
    display: none;
  }
`

export const FillParent = styled.div `
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
`

export const LightFade = styled(FillParent) `
  background: linear-gradient(transparent 70%, #f5f5f5 100%);
  z-index: 2;
`

export const DarkFade = styled(FillParent) `
  background: linear-gradient(#2c2c2c24, #2c2c2c00);
  z-index: 2;
`

export const StyledBackgroundImage = styled.img `
  width: 100%;
`

export const BackgroundWrap = styled.div `
  width: 100%;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  img,
  video {
    width: 100%;
  }
`