import { h } from "@stencil/core";
import marked from "marked";
export function TemplateView(props) {
  const { states, callbacks, readme } = props;
  return [
    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
    readme ? (h("details", null,
      h("summary", null, "Props readme"),
      h("div", { innerHTML: marked(readme) }))) : (""),
    h("div", { innerHTML: states.previewTemplate }),
  ];
}
