import React from 'react'
import { StyledItem, StyledList } from './styled'

// should import & reuse
interface Item {
  index: number
  name: string
}
interface Props {
  items: Array<Item>
}

function renderItem(item: Item) {
  return <StyledItem key={item.index}>{item.name}</StyledItem>
}
export default class ListOfItems extends React.PureComponent<Props> {
  render() {
    const view = this.props.items.map(renderItem)
    return <StyledList>{view}</StyledList>
  }
}