import React from 'react'
import { Tag, Space, Typography } from 'antd'
import PropTypes from 'prop-types'

const { Text } = Typography

const TagsDisplay = ({ tags, style }) => {
  let tagArray = []
  if (typeof tags === 'string') {
    tagArray = [tags]
  } else if (Array.isArray(tags)) {
    tagArray = tags
  }

  if (
    !tagArray ||
    tagArray.length === 0 ||
    (tagArray.length === 1 && !tagArray[0])
  ) {
    return <Text type='secondary'>n/a</Text>
  }

  return (
    <Space size={'small'} wrap style={style}>
      {tagArray.map((tag, index) => (
        <Tag key={index} color='blue' style={{ margin: 0 }}>
          {tag}
        </Tag>
      ))}
    </Space>
  )
}

TagsDisplay.propTypes = {
  tags: PropTypes.arrayOf(PropTypes.string),
  style: PropTypes.object
}

export default TagsDisplay
