import * as React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withInfo } from "@storybook/addon-info";
import { host } from "storybook-host";

import EmptyStateComponent from "./EmptyStateComponent";

const ReadMe = require("./README.md");

const options = {
  info: {
    header: false,
    text: `
# EmptyStateComponent
Shows an empty state message, image, and optional action item    
    `,
  },
  notes: ReadMe,
};

storiesOf("Components|DisplayItems/Components/EmptyStateComponent", module)
  .addDecorator(withInfo)
  .addDecorator(
    host({
      title: "EmptyStateComponent Component",
      align: "center bottom",
      height: "80%",
      width: 800,
      border: "1px solid #DDD",
    })
  )
  .add(
    "Default State",
    () => (
      <EmptyStateComponent message={<div />} image={<div />} children={<div />}>
        <span onClick={() => action("Clicked")}>This is an action!</span>
      </EmptyStateComponent>
    ),
    options
  );