card.component.ts

import { NgOptimizedImage } from '@angular/common';
import { Component, input, output, TemplateRef } from '@angular/core';
import { CardType } from '../../model/card.model';
import { ListItemComponent } from '../list-item/list-item.component';

@Component({
  selector: 'app-card',
  template: `
    <div
      class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4"
      [class]="customClass()">
      <ng-content select="[card-image]" />
      <!--      @if (type() === CardType.TEACHER) {-->
      <!--        <img ngSrc="assets/img/teacher.png" width="200" height="200" />-->
      <!--      }-->
      <!--      @if (type() === CardType.STUDENT) {-->
      <!--        <img ngSrc="assets/img/student.webp" width="200" height="200" />-->
      <!--      }-->

      <section>
        @for (item of list(); track item) {
          <app-list-item
            [item]="item"
            [itemTemplate]="itemTemplateRef()"></app-list-item>
        }
      </section>

      <button
        class="rounded-sm border border-blue-500 bg-blue-300 p-2"
        (click)="addNewItem()">
        Add
      </button>
    </div>
  `,
  imports: [ListItemComponent, NgOptimizedImage],
})
export class CardComponent {
  // private teacherStore = inject(TeacherStore);
  // private studentStore = inject(StudentStore);

  readonly list = input<any[] | null>(null);
  // readonly type = input.required<CardType>();
  readonly customClass = input('');
  listItemDeleted = output<any>();
  readonly itemTemplateRef = input.required<TemplateRef<any>>();
  itemAdded = output();

  CardType = CardType;

  addNewItem() {
    this.itemAdded.emit();
    // const type = this.type();
    // if (type === CardType.TEACHER) {
    //   this.teacherStore.addOne(randTeacher());
    // } else if (type === CardType.STUDENT) {
    //   this.studentStore.addOne(randStudent());
    // }
  }
  deleteListItem(item: any) {
    this.listItemDeleted.emit(item);
  }
}