/**
 * @mergeTarget
 * @module Src/Components/TextsContainer
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { textsContainerStyles } from "./texts-container.css";

/**
 * Class representing a text container component extending LisioComponent.\
 * It aims to represent a text container component.\
 * A text container component is basically a container to display paragraphs.\
 */
class TextsContainer extends LisioComponent {
  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a text container in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
      <div class="lisio-texts-container ${this.renderClasses()}">
        <children></children>
      </div>
    `;
  }

  /**
   * Constructor of class {@link TextsContainer | TextsContainer}
   * @param {LisioComponent[]} children - Children of component
   * @param {string[] | undefined} cssClasses - CSS class of component
   * @source
   */
  constructor(children: LisioComponent[], cssClasses?: string[]) {
    super(TextsContainer.name, undefined, cssClasses);
    this._children = children;
  }
}

new LisioComponentStyles(TextsContainer.name, textsContainerStyles);

export { TextsContainer };