import React from 'react';
import { Button, Popconfirm, message, Row, Col } 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 typeList = [
    'top',
    'left',
    'right',
    'bottom',
    'topLeft',
    'topRight',
    'bottomLeft',
    'bottomRight',
    'leftTop',
    'leftBottom',
    'rightTop',
    'rightBottom',
  ];
  return (
    <Row>
      {typeList.map(item => {
        return (
          <Col span="4" style={{ marginBottom: '20px' }} key={item}>
            <Popconfirm
              title="基础气泡确认框"
              placement={item}
              onConfirm={confirm}
              onCancel={cancel}
            >
              <Button type="secondary">{item}</Button>
            </Popconfirm>
          </Col>
        );
      })}
    </Row>
  );
};