class CodeBlockComponent extends HTMLElement {
  connectedCallback() {
    const trimmed = this.innerHTML.trim();
    const lang = this.getAttribute("language");
    const inline = this.getAttribute("inline") !== null;

    this.innerHTML = `
        <pre id="pre"><code id="code">${trimmed}</code></pre>
    `;

    /**
     * @type {HTMLPreElement}
     */
    const pre = this.querySelector("#pre");

    if (lang) {
      pre.className = `language-${lang}`;
    }

    /**
     * @type {Partial<CSSStyleDeclaration>}
     */
    const style = {
      background: "#f5f2f0",
      padding: "1em",
      margin: "1em 0",
      fontSize: "large",
      overflow: "auto",
      borderRadius: '5px'
    };

    if (inline) {
      style.display = 'inline';
      style.padding = '0.25em 0.3em';
    }

    Object.keys(style).forEach((rule) => {
      pre.style[rule] = style[rule];
    });
  }
}