import { $, render } from 'woby'
import { Wodal } from 'woby-modal';

// include styles
import '../../dist/output.css'

const App = () => {
    const visible = $(false)

    const show = (v: string) => {
        animation(v)
        visible(true)
    }

    const hide = () => {
        visible(false)
    }

    return (
      <div>
        <button onClick={this.show.bind(this)}>show</button>

        <Wodal
            visible={visible}
            onClose={hide}
            animation={animation}
            closeOnEsc className='w-[50%] h-[25%]'
        >
            <div>Content</div>

            <button className="vodal-confirm-btn" onClick={hide}>
                ok
            </button>
            <button className="vodal-cancel-btn" onClick={hide}>
                close
            </button>
        </Wodal>
      </div>
    );
  }

render(<App />, document.getElementById('app'))