import { html, nothing } from "lit";
import { CommunicationActionMenu } from "./communication-action-menu";

export const template = (props: CommunicationActionMenu) => {
  return html`
    <div class="item" ?expanded=${props.showText}>
      <div class="icon-label">
        <dss-icon icon=${props.icon} size="md"></dss-icon>
        ${props.showText ? html`<span>${props.label}</span>` : ""}
        ${
          !props.showText
            ? html`
          <dss-tooltip position="right">
            ${props.label}
          </dss-tooltip>`
            : nothing
        }
      </div>
      <dss-action-menu id="communication-sidenav-region-container" slot="content" >
      </dss-action-menu>
      ${props.showText ? html`<dss-icon icon="chevron_right" size="md"></dss-icon>` : nothing}
    </div>
  `;
};