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">
            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'));

