import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';
import { ProductImageDirective } from '@isa/shared/product-image';
import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';

export type ProductInfoItem = {
  ean?: string;
  name?: string;
  contributors?: string;
};

export type ProductNameSize = 'small' | 'medium' | 'large';

@Component({
  selector: 'checkout-product-info',
  templateUrl: './product-info.component.html',
  styleUrls: ['./product-info.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [ProductImageDirective, ProductRouterLinkDirective],
})
export class ProductInfoComponent {
  item = input.required<ProductInfoItem>();

  nameSize = input<ProductNameSize>('medium');

  nameSizeClass = computed(() => {
    const size = this.nameSize();
    switch (size) {
      case 'small':
        return 'isa-text-body-2-regular';
      case 'medium':
        return 'isa-text-subtitle-1-regular';
      case 'large':
        return 'isa-text-heading-3-regular';
      default:
        return 'isa-text-subtitle-1-regular';
    }
  });
}
