import { Component, input, output } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { Course, CourseProgress } from '../../models/types';

@Component({
  selector: 'app-course-card',
  imports: [NzIconModule],
  templateUrl: './course-card.html',
  styleUrl: './course-card.css'
})
export class CourseCard {
  course = input.required<Course>();
  progress = input<CourseProgress | null>(null);
  clicked = output<Course>();

  get progressPercent(): number {
    return Math.round(this.progress()?.progressPercentage ?? 0);
  }

  get isCompleted(): boolean {
    return this.progressPercent === 100;
  }

  get isEnrolled(): boolean {
    return this.progress() !== null;
  }

  onClick(): void {
    this.clicked.emit(this.course());
  }
}