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

@customElement('arx-loading-view')
export class LoadingView extends LitElement {
  static override styles = [
    css`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px;
        color: var(--color-accent);
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .spinner {
        animation: spin 1.5s linear infinite;
        width: 18px;
        height: 18px;
        border: 2px solid var(--color-accent-content);
        border-top: 2px solid var(--color-accent);
        border-radius: 50%;
      }
    `,
  ];

  override render() {
    return html`
      <div class="spinner"></div>
      Loading...
    `;
  }
}
