import { Component, Input } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@Component({
  selector: 'cal-loading-spinner',
  standalone: true,
  imports: [MatProgressSpinnerModule],
  template: `
    <div class="spinner-wrap" [class.inline]="inline">
      <mat-spinner [diameter]="diameter" color="primary"></mat-spinner>
      @if (message) {
        <span class="message">{{ message }}</span>
      }
    </div>
  `,
  styles: [
    `
      .spinner-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 3rem 1.5rem;
      }
      .spinner-wrap.inline {
        padding: 1.5rem;
      }
      .message {
        font-size: 0.9rem;
        color: var(--cal-text-muted, #64748b);
      }
    `,
  ],
})
export class LoadingSpinnerComponent {
  @Input() message = '';
  @Input() diameter = 40;
  @Input() inline = false;
}