import React from 'react'
import { IncrementDecrementProps } from './typings'
import {
  ButtonWrapper,
  UpArrowIcon,
  DownArrowIcon,
  StyledButton,
} from './styled'

/**
 * @todo Text input box needs to be added in this Component
 * as of now its just a up and down arrows within it
 */
class IncrementDecrement extends React.PureComponent<IncrementDecrementProps> {
  static defaultProps = {
    className: '',
  }

  render() {
    const { className } = this.props
    return (
      <ButtonWrapper className={className}>
        <StyledButton>
          <UpArrowIcon up />
        </StyledButton>
        <StyledButton>
          <DownArrowIcon down />
        </StyledButton>
      </ButtonWrapper>
    )
  }
}
export { IncrementDecrement }
export default IncrementDecrement