import React from 'react'
import { ListWrapper, ItemPanel } from './styled'
import { TextPlaceholder } from 'atoms/Placeholder/TextPlaceholder'
import { ListProps } from './typings'

function renderItem(item: ListProps, props?: ListProps) {
  const { width, height } = props
  return <TextPlaceholder width={width} height={height} />
}

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

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

export { renderWrapper, renderItem, renderList }