import type { CSSResultGroup, TemplateResult } from 'lit';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('vic-btn-badge')
export class VicBtnBadge extends LitElement {
  @property({ type: Boolean, reflect: true, attribute: 'text-badge' }) public isText = false;
  protected render(): TemplateResult {
    return html`<div class="badge"><slot></slot></div>`;
  }

  static get styles(): CSSResultGroup {
    return css`
      :host {
        --vic-btn-badge-background-color: var(--primary-color);
        --vic-btn-badge-color: var(--white-color);
        --mdc-icon-size: 12px;
      }
      :host([text-badge]) .badge {
        width: fit-content;
        padding-inline: 4px;
        font-size: 12px;
      }
      .badge {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background-color: var(--vic-btn-badge-background-color);
        transition: background-color 280ms ease-in-out;
      }
      .badge ::slotted(*) {
        color: var(--vic-btn-badge-color);
      }
    `;
  }
}
