import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { type CaseStudyCopy } from '../../core/content/content.contracts';
import { MetricList } from '../metric-list/metric-list';

@Component({
  selector: 'app-case-study',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MetricList],
  templateUrl: './case-study.html',
  styleUrl: './case-study.scss',
})
export class CaseStudy {
  readonly caseStudy = input.required<CaseStudyCopy>();
  readonly situationLabel = input.required<string>();
  readonly approachLabel = input.required<string>();
  readonly outcomeLabel = input.required<string>();
  readonly stackLabel = input.required<string>();

  protected readonly headingId = computed(() => `case-heading-${this.caseStudy().id}`);
  protected readonly metricsLabelId = computed(() => `case-metrics-${this.caseStudy().id}`);
}