import PropTypes from 'prop-types'
import { Flex, Tag, Typography } from 'antd'

const { Text } = Typography

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

  return (
    <Flex gap='small' wrap>
      {value.map((item, index) => (
        <Tag key={`${item}-${index}`}>
          {prefix}
          {item}
          {suffix}
        </Tag>
      ))}
    </Flex>
  )
}

ArrayDisplay.propTypes = {
  value: PropTypes.array,
  prefix: PropTypes.node,
  suffix: PropTypes.node
}

export default ArrayDisplay