import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { ProductFormatIconComponent } from './product-format-icon.component';

@Component({
  selector: 'shared-product-format',
  template: `<shared-product-format-icon
      [format]="format()"
    ></shared-product-format-icon>
    <span
      [class.isa-text-body-2-regular]="!formatDetailsBold()"
      [class.isa-text-body-2-bold]="formatDetailsBold()"
      class="text-isa-secondary-900"
    >
      {{ formatDetail() }}
    </span>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ProductFormatIconComponent],
  host: {
    '[class]': '["flex", "items-center", "gap-2"]',
    'data-what': 'product-format',
    'data-which': 'shared-product-format',
  },
})
export class ProductFormatComponent {
  format = input.required<string>();

  formatDetail = input.required<string>();

  formatDetailsBold = input<boolean>(false);
}
