import DropdownItemStyle from "@styles/buttons/ui/tems-dropdown-item.scss?inline";
// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1104-23604&m=dev
import {
  LitElement,
  type TemplateResult,
  css,
  html,
  nothing,
  unsafeCSS,
} from "lit";
import { customElement, property } from "lit/decorators.js";

export type TemsDropdownItemProps = {
  label?: string;
  active: boolean;
  icon?: TemplateResult;
};

@customElement("tems-dropdown-item")
export class TemsDropdownItem extends LitElement {
  static styles = css`
    ${unsafeCSS(DropdownItemStyle)}
  `;

  @property({ attribute: "label", type: String, reflect: true })
  label: TemsDropdownItemProps["label"];

  @property({ attribute: false })
  icon: TemsDropdownItemProps["icon"];

  @property({ attribute: "active", type: Boolean, reflect: true })
  active: TemsDropdownItemProps["active"] = false;

  render() {
    return html`<button class=${this.active ? "active" : nothing}>
      <span class="icon"
        >${
          this.icon ? html`${this.icon}` : html`<slot name="icon"></slot>`
        }</span
      >
      <label
        >${
          this.label
            ? html`${this.label}`
            : html`<slot></slot><slot name="label"></slot>`
        }</label
      >
    </button>`;
  }
}