import { Component, h, Host, State } from '@stencil/core';
const demo1 = `<dvn-content-switcher
  options={[
    {
      label: 'Pairs',
      value: 'pairs',
    },
    {
      label: 'Requests',
      value: 'requests',
    },
  ]}
  onChange={(event: CustomEvent<string>) => this.selectedContent = event.detail}
  value={this.selectedContent}
/>
`;
export class ShowcaseContentSwitcher {
  constructor() {
    this.selectedContent = 'pairs';
  }
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true },
        h("div", null,
          h("dvn-content-switcher", { options: [
              {
                label: 'Pairs',
                value: 'pairs',
              },
              {
                label: 'Received Requests',
                value: 'requests',
              },
              {
                label: 'Messages',
                value: 'messages',
              },
            ], onChange: (event) => this.selectedContent = event.detail, value: this.selectedContent }),
          h("br", null),
          h("br", null),
          h("dvn-highlighted-code", { leaned: true, textToCopy: demo1 }, demo1)))));
  }
  static get is() { return "showcase-content-switcher"; }
  static get states() { return {
    "selectedContent": {}
  }; }
}
