import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { DialogCloseDirective, DialogRef } from '@ngneat/dialog';

export interface ConfirmDialogData {
  title: string;
  body: string;
}

@Component({
  template: `<div class="flex flex-col items-center justify-start p-4">
    <div class="text-lg font-bold pb-2">{{ ref.data.title }}</div>
    <div class="pb-4 border-b border-gray-400">{{ ref.data.body }}</div>
    <div class="pt-4">
      <button mat-button class="mr-2" dialogClose>Abbrechen</button>
      <button mat-button class="warn-btn" [dialogClose]="true">Bestätigen</button>
    </div>
  </div>`,
  styles: `@use "@angular/material" as mat;

  .warn-btn {
    @include mat.button-overrides(
      (
        text-label-text-color: var(--mat-sys-error)
      )
    );
  }
  `,
  imports: [MatButtonModule, DialogCloseDirective],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfirmDialogComponent {
  ref: DialogRef<ConfirmDialogData> = inject(DialogRef);
}
