import React from 'react'
import styles from './index.module.less'

import { Popover } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

export type ContentItem = {
  title: string
  text: string
}

type ComponentProps = {
  label: string
  title: string
  content: ContentItem[]
}

const PopoverTip: React.FC<ComponentProps> = ({ label, title, content }) => {
  const contentEle = content.map(_ => <PopoverTipContentItem key={_.text} content={_} />)

  return (
    <Popover title={title} content={contentEle}>
      <span className={styles['popover-tip']}>
        <InfoCircleOutlined />
        {label}
      </span>
    </Popover>
  )
}

type PopoverTipContentItemProps = {
  content: ContentItem
}

const PopoverTipContentItem: React.FC<PopoverTipContentItemProps> = ({ content }) => {
  const { title, text } = content

  return (
    <div className={styles['popover-tip-content-item']}>
      <div className="title">{title}</div>
      <div className="text">{text}</div>
    </div>
  )
}

export default PopoverTip