import React from 'react'
import { ListProps, ItemProps } from './typings'
import { ListWrapper, ItemPanel, StyledText } from './styled'

/**
 *
 * @param item each item from map function
 * @param props list props which shared through the list function
 */
function renderItem(item: ItemProps) {
  const textContent = item.label || 'undefined'
  return <StyledText content={textContent} />
}

/**
 * rendering the list
 */
function renderList(props: ListProps) {
  const { list } = props
  return list.map((item) => (
    <ItemPanel>{props.renderItem(item, props)}</ItemPanel>
  ))
}

/**
 * rendering the wrapper
 */
function renderWrapper(props: ListProps) {
  const { className, children, isHorizontalView } = props
  return (
    <ListWrapper className={className} isHorizontalView={isHorizontalView}>
      {children}
    </ListWrapper>
  )
}

export { renderList, renderItem, renderWrapper }