import React from 'react'
import { ReactElement } from 'react'
import { Separator } from './styled'
import { BreadCrumbItem } from './BreadCrumbItem'
import { LabelValue } from './typings'

/**
 * @todo can implement renderProps here as well, currently needed 1:1 functionality
 */
const renderList = (list: LabelValue[]) => {
  const crumbs: ReactElement<any>[] = []

  const addItemToList = (item: LabelValue, index: number) => {
    const { label, value } = item

    if (!label && !value) {
      return
    }

    const isLast = index === list.length - 1
    const key = label + value
    const view = (
      <BreadCrumbItem isActive={isLast} key={key} text={value} {...item} />
    )
    crumbs.push(view)

    if (isLast === false) {
      crumbs.push(<Separator key={key + 'separator'} />)
    }
  }

  list.forEach(addItemToList)
  return crumbs
}

export { renderList }