import styled from 'styleh-components'
import { Image } from 'atoms/Image'

const CarouselWrapper = styled.section`
  position: relative;
  overflow: hidden;
`

const CarouselPanel = styled.div`
  height: auto;
  position: relative;
`

const ItemListPanel = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  transition: all 600ms ease;
  transform: ${props => 'translateX(-' + props.translatePercentage + '%)'};
`

const ItemPanel = styled.div`
  flex: 0 0 ${props => props.flexWidth}%;
  padding-left: ${props => props.gridGap / 2 + 'px'};
  padding-right: ${props => props.gridGap / 2 + 'px'};
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 600ms ease;
`

const StyledImage = styled.withComponent(Image)`
  display: flex;
  flex-direction: row;
  align-items: center;
`

export { CarouselWrapper, CarouselPanel, ItemListPanel, ItemPanel, StyledImage }