import { ansiToLitHtml } from '@/utils/ansiToLitHtml';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';

@customElement('arx-relay-logs')
export class RelayLogs extends LitElement {
  static override styles = css`
    :host {
      display: block;
      font-family: var(--font-family, "Inter", system-ui, sans-serif);
      margin: 0 auto;
      line-height: 1.6;
      color: var(--color-base-content);
    }

    .relay-logs {
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word;
      overflow-x: auto;
      max-height: 200px;
      padding: 1rem;
      border: 2px solid var(--color-base-300);
      border-radius: var(--radius-box);
      border-radius: var(--radius-md);
      background-color: var(--color-code-block);
      color: var(--color-code-block-content);
    }
  `;

  @property({ type: Array }) logs: string[] = [];

  override render() {
    return html`
      <pre class="relay-logs">${map(this.logs, (log) => ansiToLitHtml(log))}</pre>
    `;
  }
}
