/**
 * Push Box Component
 * A promotional container with logo, title, and CTA
 * Uses slots for all content to allow easy customization in HTML
 */
class PushBox extends HTMLElement {
  static get observedAttributes() {
    return ["background-color", "text-color"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  get backgroundColor() {
    return (
      this.getAttribute("background-color") ||
      "var(--color-push-box-bg, #EBEEF4)"
    );
  }

  get textColor() {
    return this.getAttribute("text-color") || "#951D51";
  }

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

        .push-box {
          background-color: ${this.backgroundColor};
          margin-bottom: 16px;
          padding: 48px 16px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          border-radius: 4px;
        }

        .logo-wrapper {
          display: block;
          margin-bottom: 32px;
        }

        .logo-wrapper ::slotted(img) {
          width: 104px;
          height: auto;
        }

        .title-wrapper ::slotted(*) {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 24px;
          font-weight: 700;
          line-height: 34px;
          color: #000000;
          margin: 0;
        }

        .cta-wrapper {
          color: #951D51;
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          font-weight: 400;
        }
      </style>
      <div class="push-box">
        <div class="logo-wrapper">
          <slot name="logo"></slot>
        </div>
        <div class="title-wrapper">
          <slot name="title"></slot>
        </div>
        <div class="cta-wrapper">
          <slot name="cta"></slot>
        </div>
      </div>
    `;
  }
}

customElements.define("push-box", PushBox);