import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
import { IconComponent } from '../../../../shared/ui/icon/icon.component';
import { AppIconName } from '../../../../shared/ui/icon/icon-registry';

export interface DashboardTimelineEntry {
  id: string;
  labelKey: string;
  timeText: string;
  icon: AppIconName;
}

export type DashboardTimelineStatus = 'loading' | 'ready' | 'unavailable' | 'error';

@Component({
  selector: 'app-dashboard-timeline',
  standalone: true,
  imports: [TranslatePipe, SkeletonComponent, EmptyStateComponent, IconComponent],
  templateUrl: './dashboard-timeline.component.html',
  styleUrl: './dashboard-timeline.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardTimelineComponent {
  readonly status = input<DashboardTimelineStatus>('ready');
  readonly entries = input<DashboardTimelineEntry[]>([]);
}
