/**
 * Book Reviews Component
 * Displays customer reviews for a book
 */
class BookReviews extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

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

        .reviews-container {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-lg, 1.5rem);
        }

        .no-reviews {
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          color: var(--color-text-light, #64748b);
          text-align: center;
          padding: var(--spacing-xl, 2rem);
        }
      </style>
      <div class="reviews-container">
        <slot>
          <p class="no-reviews">Nog geen recensies. Wees de eerste om een recensie te schrijven!</p>
        </slot>
      </div>
    `;
  }
}

customElements.define("book-reviews", BookReviews);