import React from 'react';
import { Button, Popconfirm, message, Row, Col, Icon } from '@btri-ui/base';

export default () => {
  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    message.error('Click on No');
  };

  const confirm = (e: React.MouseEvent<HTMLElement>) => {
    message.success('Click on confirm');
  };

  const IconNode = (
    <Icon
      iconName="AttentionCircleOne"
      style={{ color: 'var(--primary-color)' }}
    ></Icon>
  );

  const typeList = [
    {
      btnype: 'primary',
      label: '默认',
      title: '确认气泡框标题',
      content:
        '这里是一段描述文字这里是一段描述文字这里是一段描述文字这里是一段描述文字',
    },
    {
      btnype: 'primary',
      label: '带图标',
      title: '确认气泡框标题',
      content:
        '这里是一段描述文字这里是一段描述文字这里是一段描述文字这里是一段描述文字',
      icon: IconNode,
    },
  ];

  return (
    <Row>
      {typeList.map(item => {
        return (
          <Col span="4" key={item.label}>
            <Popconfirm
              title={item.title}
              onConfirm={confirm}
              onCancel={cancel}
              content={item.content}
              icon={item.icon}
            >
              <Button type={item.btnype}>{item.label}</Button>
            </Popconfirm>
          </Col>
        );
      })}
    </Row>
  );
};