import { Component, computed, input } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { ProductFormatIconGroup } from '@isa/icons';

@Component({
  selector: 'shared-product-format-icon',
  template: `<ng-icon [name]="formatLowerCase()" size="1.5rem"></ng-icon>`,
  imports: [NgIcon],
  providers: [provideIcons(ProductFormatIconGroup)],
  host: {
    '[class]': '["inline-block","text-isa-neutral-900", "size-6"]',
    'data-what': 'product-format-icon',
    'data-which': 'shared-product-format-icon',
  },
})
export class ProductFormatIconComponent {
  format = input.required<string>();

  formatLowerCase = computed(() => this.format()?.toLowerCase());
}
