import { Component, Input } from '@angular/core';

@Component({
  selector: 'ui-loading-state',
  standalone: true,
  template: `
    <section class="ui-loading-state" [class.inline]="inline" aria-live="polite">
      <span class="ui-spinner" aria-hidden="true"></span>
      <span>{{ label }}</span>
    </section>
  `,
  styles: [
    `
      .ui-loading-state {
        min-height: 8rem;
        display: grid;
        place-items: center;
        gap: var(--space-3);
        color: var(--color-text-secondary);
      }
      .inline {
        min-height: auto;
        display: inline-flex;
      }
    `,
  ],
})
export class UiLoadingStateComponent {
  @Input() label = 'Wird geladen.';
  @Input() inline = false;
}