import React from 'react'
import {
  DescriptionItem,
  DescriptionTitle,
  DescriptionValue,
  DescriptionContainer,
  DescriptionHeading,
} from './styled'
import { DetailedItem, DetailedListProps } from './typings'

export function renderSpecificationItem(item: DetailedItem) {
  return (
    <DescriptionItem>
      <DescriptionTitle>{item.title || item.label}</DescriptionTitle>
      <DescriptionValue>{item.value}</DescriptionValue>
    </DescriptionItem>
  )
}

export function renderSpecificationWrap(props: DetailedListProps) {
  return <DescriptionContainer {...props} />
}

export function renderSpecificationList(props: DetailedListProps) {
  const specifications = props.specifications || props.list

  if (specifications.length > 0) {
    return specifications.map(props.renderSpecificationItem)
  } else {
    return props.wording.empty
  }
}

export function renderSpecificationHeading(props: DetailedListProps) {
  return <DescriptionHeading text={props.wording.heading} />
}