import React from 'react'
import { getValidNumber } from '../deps'
import { MediaCarouselStateType } from '../typings'
import { NavigationIcon } from './styled'
import { CarouselArrowProps } from './typings'

function defaultRenderArrows(
  props: CarouselArrowProps,
  state: MediaCarouselStateType
) {
  const { arrowIconColor, arrowIconSize } = props
  const {
    toNext,
    toPrevious,
    shouldLeftNavActive,
    shouldRightNavActive,
  } = state
  const validArrowIconSize = getValidNumber(arrowIconSize)
  return (
    <React.Fragment>
      <NavigationIcon
        type={'left'}
        align={'left'}
        key={'left'}
        onClick={toPrevious}
        arrowIconColor={arrowIconColor}
        arrowIconSize={validArrowIconSize}
        shouldActive={shouldLeftNavActive}
      />
      <NavigationIcon
        type={'right'}
        align={'right'}
        key={'right'}
        onClick={toNext}
        arrowIconColor={arrowIconColor}
        arrowIconSize={validArrowIconSize}
        shouldActive={shouldRightNavActive}
      />
    </React.Fragment>
  )
}

export { defaultRenderArrows }