import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { CardComponent } from '../../../../shared/ui/card/card.component';
import { IconComponent } from '../../../../shared/ui/icon/icon.component';
import { AppIconName } from '../../../../shared/ui/icon/icon-registry';

@Component({
  selector: 'app-dashboard-card',
  standalone: true,
  imports: [TranslatePipe, CardComponent, IconComponent],
  templateUrl: './dashboard-card.component.html',
  styleUrl: './dashboard-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[style.grid-column]': 'span()',
  },
})
export class DashboardCardComponent {
  readonly titleKey = input<string | null>(null);
  readonly icon = input<AppIconName | null>(null);
  /** 12-column grid span at desktop width, e.g. 'span 12' or 'span 4'. */
  readonly span = input<string>('span 4');
}
