import React from 'react'
import styled from 'styled-components'
import Box from '../Box'
import { slide } from 'components/keyframes'

const SliderContainer = styled('div')`
  overflow: hidden;
  white-space: nowrap;
`

const SliderContainerWrapper = styled('div')`
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: ${slide} ${props => props.duration}s linear infinite;
  animation-direction: ${props => props.animationDirection};

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
`

const SliderContainerChildren = styled('div')`
  display: inline-block;
`

const BackgroundSlider = ({
  animationDirection = 'normal',
  duration,
  children
}) => (
  <SliderContainer>
    <SliderContainerWrapper
      animationDirection={animationDirection}
      duration={duration}
    >
      <SliderContainerChildren>{children}</SliderContainerChildren>
      <SliderContainerChildren>{children}</SliderContainerChildren>
    </SliderContainerWrapper>
  </SliderContainer>
)

const BackgroundSliderContainer = styled(Box)`
  &:hover {
    div {
      animation-play-state: paused;
    }
  }
`

export { BackgroundSlider, BackgroundSliderContainer }
