import React from 'react';
import { Popconfirm } from '@easyv/antd';
import classes from './Key.less';
import img from '../../../../../../images/icon_key_default.png';

const Key = ({
  uniqueTag,
  title,
  keyValue,
  time,
  onDelete
}: {
  uniqueTag: string;
  title: string;
  keyValue: string;
  time: string;
  onDelete: (uniqueTag) => void;
}) => {
  return (
    <div
      className={classes['key-container']}
      style={{
        display: 'flex',
        alignItems: 'center',
        padding: '16px 16px',
        minHeight: 64
      }}>
      <img style={{ width: 18, marginRight: 16 }} src={img} />
      <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
        <p>{title && title.trim() !== '' ? title : 'Undefined'}</p>
        <p>{keyValue}</p>
      </div>
      <div style={{ marginLeft: 8 }}>{time}</div>
      <Popconfirm onConfirm={() => onDelete(uniqueTag)} okText="确定" cancelText="取消" title="确定要删除这个密钥吗?">
        <i className={`icon iconfont icon-btn_delete ${classes['delete-button']}`} />
      </Popconfirm>
    </div>
  );
};

export default Key;
