/**
 * Arrow Button Component
 * A CTA link with a circular arrow icon
 * Uses a slot for the button text content
 */
class ArrowButton extends HTMLElement {
  static get observedAttributes() {
    return ["href"];
  }

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

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  get href() {
    return this.getAttribute("href") || "#";
  }

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

        .arrow-button {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: inherit;
          font-family: inherit;
          font-size: inherit;
          transition: opacity var(--transition-fast, 150ms ease);
        }

        .arrow-button:hover {
          opacity: 0.8;
        }

        .arrow-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .button-text {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      </style>
      <a class="arrow-button" href="${this.href}">
        <span class="arrow-icon">
          <arrow-circle-right-icon size="24"></arrow-circle-right-icon>
        </span>
        <span class="button-text">
          <slot></slot>
        </span>
      </a>
    `;
  }
}

customElements.define("arrow-button", ArrowButton);