import { Component, Input } from '@angular/core';
import { IonCard } from '@ionic/angular';
import { IonItem } from '@ionic/angular';
import { IonCheckbox } from '@ionic/angular';
import { IonLabel } from '@ionic/angular';
import { IonBadge } from '@ionic/angular';

@Component({
  selector: 'app-task-card',
  template: `
    <ion-card>
      <ion-item lines="none">
        <ion-checkbox slot="start"></ion-checkbox>
        <ion-label>
          <div class="task-header">
            <span class="task-title">{{title}}</span>
            <ion-badge *ngFor="let tag of tags" color="light">{{tag}}</ion-badge>
          </div>
          <div class="task-meta">
            <span>⏰ {{dueTime}}</span>
            <span *ngIf="subtasksCount > 0">📁 {{subtasksCount}}个子任务</span>
          </div>
        </ion-label>
      </ion-item>
    </ion-card>
  `,
  styleUrls: ['./task-card.component.scss'],
  standalone: true,
  imports: [
    IonCard,
    IonItem,
    IonCheckbox,
    IonLabel,
    IonBadge
  ]
})
export class TaskCardComponent {
  @Input() title = '';
  @Input() tags: string[] = [];
  @Input() dueDate = '';
  @Input() dueTime = '';
  @Input() subtasksCount = 0;
}