export function mount({ root, state, host }) {
  const render = (nextState) => {
    const title = typeof nextState.title === "string" ? nextState.title : "";
    root.innerHTML = `<div data-fixture-title="${title}">${title}</div>`;
  };

  render(state);
  host.setLiveContent({ phase: "mount", title: state.title ?? "" });
  host.setRefreshHandler(() => {
    root.dataset.refreshed = "1";
  });

  return {
    update({ state: nextState, host: nextHost }) {
      render(nextState);
      nextHost.setLiveContent({ phase: "update", title: nextState.title ?? "" });
    },
    destroy() {
      root.dataset.destroyed = "1";
      root.innerHTML = "";
      host.setRefreshHandler(null);
    },
  };
}