/**
 * Site Header Component
 * Sticky header container that holds top-bar, navigation, and search
 */
class SiteHeader extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: sticky;
          top: 0;
          z-index: 100;
          background-color: var(--color-background, #ffffff);
        }

        .header {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-sm, 0.5rem);
          padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
          border-bottom: 1px solid var(--color-border, #e2e8f0);
        }
      </style>
      <header class="header">
        <slot></slot>
      </header>
    `;
  }
}

customElements.define('site-header', SiteHeader);