import React from 'react'
import styles from './style.module.less'
import { CheckCircleFilled, CloseCircleFilled, CloseCircleOutlined, EditOutlined } from '@ant-design/icons';
import clsx from 'clsx';

export default function tagModular(props) {
const { data = [], deleteMember, editMember } = props


  return (
    <span>
      {
        data.map((i, k) => {
          return (
            <span className= {styles.tagModular} key={k}>
              <span className={clsx(styles.TagMember, 'flex-center-between')}>
                {i.status && i.status.key === 'ACTIVE' || i.status && i.status.key === 'INIT' ? <CheckCircleFilled className={styles.tagTrue} /> : ''}
                {i.status && i.status.key === 'INACTIVE' || i.status && i.status.key === 'DESTROYED' ? <CloseCircleFilled className={styles.tagfalse} /> : ''}
                <span className={styles.tagName}>{i.name || i.machineName}</span>
                {
                  i.machineName && <EditOutlined className={styles.tagEdit} onClick={() => editMember(i)} />
                }
                {
                  deleteMember &&  <CloseCircleOutlined onClick={() => deleteMember(i)} />
                }
              </span>
            </span>
          );
        })
      }
    </span>
  );
}