import React from 'react'
import clsx from 'clsx'
import { Tooltip } from 'antd'
import '@platformuiserver/platformui.assets/css/index.less'
import styles from './style.module.less'
export default function DetialHeader (props) {
  const {
    type,  // 类型
    data,
    children
  } = props
  const { id = '', name = '' } = data
  return (
    <div className={clsx(styles.DetialHeader, 'flex-center-start')}>
      <div className={clsx(styles.titleItem)}>
        <div className={styles.Id}>{`${type} - ${id}`}</div>
        <div className={clsx(styles.name, 'ellipsis')}>
          <Tooltip title={name}>{name}</Tooltip>
        </div>
      </div>
      <div style={{ flex: 1 }}>
        {children}
      </div>
    </div>
  );
}
