import Balloon from '..';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';

const defaultTrigger = (
  <Button className="btrigger" style={{ margin: '5px' }}>
    default style
  </Button>
);
const disabledTrigger = (
  <Button disabled className="btrigger" style={{ margin: '5px' }}>
    default style
  </Button>
);
const primary = (
  <Button className="btrigger" style={{ margin: '5px' }}>
    dark style
  </Button>
);

const Demo = () => (
  <div className="container">
    <Balloon
      trigger={defaultTrigger}
      closable={true}
      triggerType="click"
      align="t"
      type="dark"
    >
      default
    </Balloon>
    <Balloon trigger={defaultTrigger} triggerType="click">
      default
    </Balloon>
    <Balloon type="dark" trigger={primary} triggerType="click">
      dark
    </Balloon>
    <Balloon type="dark" trigger={primary} triggerType="click" closable={true}>
      dark
    </Balloon>
    <Balloon trigger={disabledTrigger} closable={false}>
      disabeled default
    </Balloon>
  </div>
);

ReactDOM.render(<Demo />, document.getElementById('balloon-demo-3'));