import { html, nothing } from "lit";
import { PrimariaNavItem } from "./primaria-nav-item";
import { classMap } from "lit/directives/class-map.js";

export const template = (props: PrimariaNavItem) => {
  return html`
  <div
    class=${classMap({ item: true, active: props.isActive })}
    ?expanded=${props.showText}
  >
    <div class="icon-label" @click=${props.config.callbackFn}>
      <dss-icon icon=${props.config.icon} size="md" ?fill=${props.config.fill} style=${props.config.rotateIcon ? "transform: rotate(180deg);" : ""}></dss-icon>
      ${props.showText ? html`<span>${props.config.label}</span>` : ""}
    </div>
    ${props.showText && props.config.showArrow ? html`<dss-icon icon="chevron_right" size="md"></dss-icon>` : ""}
    ${
      !props.showText
        ? html`
      <dss-tooltip position="right">
        ${props.config.label}
      </dss-tooltip>`
        : nothing
    }
  </div>
`;
};