/**
 * Top Bar Component
 * Contains menu icon, logo, and action buttons (profile, basket)
 * Uses slots for content customization from index.html
 */
class TopBar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        .top-bar {
          display: flex;
          align-items: center;
          height: 80px;
          padding: 0 16px;
          background-color: #951D51;
        }

        .left-section {
          display: flex;
          align-items: center;
          gap: 16px;
        }

        .spacer {
          flex: 1;
        }

        .right-section {
          display: flex;
          align-items: center;
        }

        /* Styles for slotted elements */
        ::slotted([slot="menu-button"]),
        ::slotted(.icon-button) {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          cursor: pointer;
          padding: 0;
        }

        ::slotted([slot="menu-button"] svg),
        ::slotted(.icon-button svg) {
          width: 32px;
          height: 32px;
          color: #ffffff;
        }

        ::slotted([slot="logo"]) {
          font-family: var(--font-family-base);
          font-size: var(--font-size-xl, 1.25rem);
          font-weight: var(--font-weight-bold, 700);
          color: #ffffff;
          text-decoration: none;
        }
      </style>
      <div class="top-bar">
        <div class="left-section">
          <slot name="menu-button"></slot>
          <slot name="logo"></slot>
        </div>
        <div class="spacer"></div>
        <div class="right-section">
          <slot name="actions"></slot>
        </div>
      </div>
    `;
  }
}

customElements.define("top-bar", TopBar);