components/button.js

class BucketMasterButton extends HTMLElement {
  static get observedAttributes() {
    return ['variant', 'size', 'disabled'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 6px;
          font-weight: 500;
          transition: all 0.2s;
          cursor: pointer;
          gap: 0.5rem;
        }
        
        /* Variants */
        button.primary {
          background-color: #F7D348;
          color: #000000;
          border: 1px solid #F7D348;
        }
        button.primary:hover {
          background-color: #FFE699;
        }
        
        button.secondary {
          background-color: #FFFFFF;
          color: #000000;
          border: 1px solid #E4E7EB;
        }
        button.secondary:hover {
          background-color: #F8F9FA;
        }
        
        button.danger {
          background-color: #FFFFFF;
          color: #EF4444;
          border: 1px solid #EF4444;
        }
        button.danger:hover {
          background-color: #FEE2E2;
        }
        
        /* Sizes */
        button.small {
          padding: 0.375rem 0.75rem;
          font-size: 0.875rem;
        }
        
        button.medium {
          padding: 0.5rem 1rem;
          font-size: 1rem;
        }
        
        button.large {
          padding: 0.75rem 1.5rem;
          font-size: 1.125rem;
        }
        
        /* Disabled */
        button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      </style>
      <button>
        <slot></slot>
      </button>
    `;
  }

  connectedCallback() {
    const button = this.shadowRoot.querySelector('button');
    const variant = this.getAttribute('variant') || 'primary';
    const size = this.getAttribute('size') || 'medium';
    const disabled = this.hasAttribute('disabled');

    button.classList.add(variant, size);
    button.disabled = disabled;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    const button = this.shadowRoot.querySelector('button');
    
    if (name === 'variant') {
      button.classList.remove(oldValue);
      button.classList.add(newValue);
    }
    
    if (name === 'size') {
      button.classList.remove(oldValue);
      button.classList.add(newValue);
    }
    
    if (name === 'disabled') {
      button.disabled = newValue !== null;
    }
  }
}
customElements.define('bucketmaster-button', BucketMasterButton);