import { LitElement, html, css } from 'lit';
import './grain-spinner.js';

export class GrainButton extends LitElement {
  static properties = {
    variant: { type: String },
    loading: { type: Boolean },
    loadingText: { type: String },
    disabled: { type: Boolean, reflect: true }
  };

  static styles = css`
    :host {
      display: inline-block;
    }
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      font-family: inherit;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    button.primary {
      background: var(--color-accent, #0066cc);
      color: white;
    }
    button.secondary {
      background: transparent;
      color: var(--color-text-primary);
      border: 1px solid var(--color-border);
    }
    button.danger {
      background: #ff4444;
      color: white;
    }
    button.ghost {
      background: transparent;
      color: var(--color-text-secondary);
      padding: 8px;
    }
  `;

  constructor() {
    super();
    this.variant = 'primary';
    this.loading = false;
    this.loadingText = '';
    this.disabled = false;
  }

  render() {
    return html`
      <button
        class=${this.variant}
        ?disabled=${this.disabled || this.loading}
      >
        ${this.loading ? html`
          <grain-spinner size="16"></grain-spinner>
          ${this.loadingText || html`<slot></slot>`}
        ` : html`
          <slot></slot>
        `}
      </button>
    `;
  }
}

customElements.define('grain-button', GrainButton);