import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';

@Component({
  selector: 'app-dashboard-metric',
  standalone: true,
  imports: [TranslatePipe, SkeletonComponent],
  templateUrl: './dashboard-metric.component.html',
  styleUrl: './dashboard-metric.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardMetricComponent {
  readonly labelKey = input.required<string>();
  /** null/undefined renders an em dash placeholder - the metric is never left blank. */
  readonly value = input<string | null | undefined>(null);
  readonly loading = input(false);
  readonly badge = input<'production' | 'development' | null>(null);
  readonly badgeLabelKey = input<string | null>(null);
}
