import React from 'react'
import { NavListStyledButton, NavListButtonWrapper, NavListButtonPanel } from './styled'
import { NavigationListProps } from './typings'
import ArrowIcon from 'atoms/Icons/ArrowIcon'

function renderArrowIcon() {
  return <ArrowIcon />
}

function defalutRenderButton(buttonProps: Object) {
  return (
    <NavListStyledButton
      breedType="icon-with-text"
      iconAlignType="suffix"
      text={buttonProps.label}
      value={buttonProps.value}
      renderIcon={renderArrowIcon}
    />
  )
}

function defaultRenderButtonList(props: NavigationListProps) {
  const { list, renderItem } = props
  // renderItem alias of renderButton
  const buttons = list.map((item, index) => renderItem(item))
  return <React.Fragment>{buttons}</React.Fragment>
}

function defaultRenderWrapper(props: NavigationListProps) {
  const { className, children } = props
  return <NavListButtonWrapper className={className}>{children}</NavListButtonWrapper>
}

export { defalutRenderButton, defaultRenderButtonList, defaultRenderWrapper }