import { html, LitElement, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('arx-error-view')
export class ErrorView extends LitElement {
  @property()
  error!: string;

  static override styles = css`
    .error {
      color: var(--error);
  }`;

  override render() {
    return html`<span class="error">${this.error}</span>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'arx-error-view': ErrorView;
  }
}