import React from "react";
import { Dialog } from "../../";

export default (
  <div className="m-5 position-relative">
    <Dialog onClose={() => {}} isRelative>
      <Dialog.Header
        expandable={true}
        help="Info about Dialog"
        onBack={() => console.log("onBack")}
        subTitle="Sub title"
        title="Title"
      >
        <Dialog.Tabs>
          <Dialog.Tab active={true} onClick={() => {}}>
            Details
          </Dialog.Tab>
          <Dialog.Tab onClick={() => {}}>Tags</Dialog.Tab>
          <Dialog.Tab disabled={true} onClick={() => {}}>
            ACL
          </Dialog.Tab>
        </Dialog.Tabs>
      </Dialog.Header>
      <Dialog.Content>Text</Dialog.Content>
      <Dialog.Footer>
        <Dialog.Button onClick={() => console.log("onClose")} text="Cancel" type="cancel" />
        <Dialog.Button onClick={() => console.log("onSubmit")} text="OK" type="submit" />
      </Dialog.Footer>
    </Dialog>
  </div>
);