/**
 * Section Title Component
 * Displays a title with an arrow right icon on the right side
 */
import { arrowRightIcon } from "../icons/arrow-right.js";

class SectionTitle extends HTMLElement {
  static get observedAttributes() {
    return ["text"];
  }

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

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    if (this.shadowRoot) {
      this.render();
    }
  }

  get text() {
    return this.getAttribute("text") || this.textContent || "Section Title";
  }

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

        .section-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: var(--spacing-lg, 1.5rem) 0;
        }

        .title-text {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: var(--font-size-2xl, 1.5rem);
          font-weight: var(--font-weight-normal, 400);
          line-height: var(--line-height-24, 24px);
          color: var(--color-text, #1e293b);
          margin: 0;
        }

        .icon-wrapper {
          display: flex;
          align-items: center;
          color: var(--color-text, #1e293b);
        }

        .icon-wrapper svg {
          width: 24px;
          height: 24px;
        }
      </style>
      <div class="section-title">
        <h2 class="title-text">${this.text}</h2>
        <div class="icon-wrapper">
          ${arrowRightIcon({ size: 24, color: "currentColor" })}
        </div>
      </div>
    `;
  }
}

customElements.define("section-title", SectionTitle);