import React from 'react'
import PropTypes from 'prop-types'
import ObjectDisplay from './ObjectDisplay'
import { Space, Typography } from 'antd'

const { Text } = Typography

const ObjectList = ({ value, objectType, style }) => {
  if (!value || !Array.isArray(value) || value.length === 0) {
    return <Text type='secondary'>n/a</Text>
  }

  return (
    <Space size={'small'} wrap style={style}>
      {value.map((item) => (
        <ObjectDisplay object={item} objectType={objectType} key={item._id} />
      ))}
    </Space>
  )
}

ObjectList.propTypes = {
  value: PropTypes.array,
  objectType: PropTypes.string,
  style: PropTypes.object
}

export default ObjectList