import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import "../hero-icon.js";

@customElement("primary-button")
export class PrimaryButton extends LitElement {
  @property({ type: String }) label = "Button";
  @property({ type: String }) icon = "";
  @property({ type: String }) iconPosition: "left" | "right" = "right";
  @property({ type: Boolean }) disabled = false;
  @property({ attribute: false }) onClick?: () => void;

  static styles = css`
    :host {
      display: inline-block;
    }

    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.625rem 1.25rem;
      background-color: var(--color-accent, #2b6cb0);
      color: var(--color-on-accent, #ffffff);
      border: none;
      border-radius: 0.375rem;
      font-family: "Inter", system-ui, sans-serif;
      font-size: var(--font-size-base, 0.9375rem);
      font-weight: var(--font-weight-medium, 500);
      cursor: pointer;
      transition: filter 0.2s ease, background-color 0.25s ease;
    }

    button:hover {
      filter: brightness(1.1);
    }

    button:active {
      filter: brightness(0.92);
    }

    button:focus-visible {
      outline: 2px solid var(--color-accent, #2b6cb0);
      outline-offset: 3px;
    }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      filter: none;
    }

    button:disabled:hover,
    button:disabled:active {
      filter: none;
    }

    hero-icon {
      width: 1.1rem;
      height: 1.1rem;
      flex-shrink: 0;
    }
  `;

  private _handleClick() {
    this.onClick?.();
  }

  render() {
    const iconEl = this.icon
      ? html`<hero-icon name=${this.icon}></hero-icon>`
      : null;

    return html`
      <button @click=${this._handleClick} ?disabled=${this.disabled}>
        ${this.iconPosition === "left" ? iconEl : null}
        ${this.label}
        ${this.iconPosition === "right" ? iconEl : null}
      </button>
    `;
  }
}
