import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
} from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { BulletListComponent } from './bullet-list.component';

@Component({
  selector: 'ui-bullet-list-item',
  template: `<ng-icon [name]="iconName()" size="1.5rem"></ng-icon>
    <ng-content></ng-content>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgIcon],
  host: {
    class: 'ui-bullet-list-item',
  },
})
export class BulletListItemComponent {
  #bulletList = inject(BulletListComponent, { optional: true, host: true });

  icon = input<string | undefined>();

  iconName = computed(() => {
    return this.icon() ?? this.#bulletList?.icon();
  });
}
