import { styled } from 'uxui-modules/view-container'
import { Button } from 'atoms/Button'
import { ArrowIcon } from 'atoms/Icons/ArrowIcon'

const InputBoxItem = styled.input `
  width: 40px;
  border: 0;
  display: inline-flex;
`

const InputBoxWrapper = styled.div ``

const ButtonComponent = styled.withComponent(Button) `
  border: 0;
  background-color: transparent;
  padding: 0;

  ${props =>
    props.isDisabled === true &&
    styled.css `
      opacity: 0.5;
      cursor: not-allowed;
    `}
`

const Arrow = styled.withComponent(ArrowIcon) `
`

const ArrowWrapper = styled.section `
  display: flex;
  flex-direction: column;
  align-items: center;

  .arrow-wrapper {
    width: 10px;
    height: 9px;
  }
`

const IncrementerWrapper = styled.div `
  display: inline-flex;
  width: 100px;
  border: 1px solid black;
  padding: 10px;
  justify-content: space-between;
`

export {
  InputBoxItem,
  InputBoxWrapper,
  ButtonComponent,
  Arrow,
  ArrowWrapper,
  IncrementerWrapper,
}