import React from 'react'

import styles from '../css/CategoryTag.module.scss'

interface ICategoryTagProps {
  content: string // 标签显示的内容
  color?: string // 自定义样式
  className?: string // 自定义样式
}

/**标签 */
const CategoryTag: React.FC<ICategoryTagProps> = props => {
  const { color, content, className } = props
  const defaultColor = [
    { tag: '医药', color: styles['medicine-color'] },
    { tag: '科技', color: styles['science-color'] },
    { tag: '消费', color: styles['consume-color'] },
    { tag: '智造', color: styles['make-color'] },
    { tag: '策略', color: styles['strategy-color'] }
  ]
  const initColor = (content: string) => {
    const findItem = defaultColor.find(item => content.includes(item.tag))
    return findItem?.color
  }
  return (
    <div className={`${styles['category-tag']} ${color ? color : initColor(content)} ${className || ''}`}>
      {content}
    </div>
  )
}

export default CategoryTag
