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

@Component({
  selector: 'app-loading-spinner',
  standalone: true,
  imports: [MatProgressSpinnerModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="spinner-container" [class.overlay]="overlay()">
      <mat-spinner [diameter]="size()" />
      @if (message()) {
        <p class="spinner-message">{{ message() }}</p>
      }
    </div>
  `,
  styles: [`
    .spinner-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      gap: 1rem;
    }

    .spinner-container.overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(4px);
      z-index: 1000;
    }

    .spinner-message {
      color: var(--text-secondary);
      font-size: 0.9375rem;
    }

    ::ng-deep .mat-mdc-progress-spinner {
      --mdc-circular-progress-active-indicator-color: var(--accent);
    }
  `],
})
export class LoadingSpinnerComponent {
  size = input(40);
  message = input<string>();
  overlay = input(false);
}
