import React from 'react'
import { wording } from 'src/words'
import { ProductItem, ItemDetailProps } from 'presets/BundleCollection/ProductItem'
import { ProductListProps } from './typings'
import { Header, Title, ItemCount } from './styled'

function defaultRenderItem(item: ItemDetailProps) {
  const { index } = item
  return <ProductItem key={index} {...item} />
}

function defaultRenderHeader(props: ProductListProps) {
  const { list, title } = props
  const primaryText = (list.length === 1) ? ` ${wording.item}` : ` ${wording.items}`
  return (
    <Header>
      <Title>{title}</Title>
      <ItemCount>{list.length + primaryText}</ItemCount>
    </Header>
  )
}

export {
  defaultRenderItem,
  defaultRenderHeader,
}