import React from 'react'
import { SectionListWrapper, SectionListHeader } from './styled'
import { SelectionListProps } from './typings'

/**
 * rendering header
 */
function renderHeader(props: SelectionListProps) {
  return <SectionListHeader>{props.title}</SectionListHeader>
}

/**
 * rendering wrapper
 */
function renderWrapper(props: SelectionListProps) {
  const { children, className, dataQa } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': dataQa,
  })
  return (
    <SectionListWrapper {...passThroughProps}>{children}</SectionListWrapper>
  )
}

export { renderWrapper, renderHeader }