import { Component, inject, signal } from '@angular/core'
import { TranslocoModule } from '@jsverse/transloco'
import { DialogRef } from '@ngneat/dialog'

@Component({
	selector: 'kadi-confirmation-modal',
	template: `
		<ng-container *transloco="let t">
			<div class="p-2.5 bg-gray-200 text-xl">{{ title() }}</div>

			<div class="p-4 text-lg">
				<div>{{ description() }}</div>
			</div>

			<div class="p-4 flex justify-end gap-2">
				<button
					class="btn btn-danger"
					(click)="cancel()">
					{{ t('Cancel') }}
				</button>

				<button
					class="btn btn-primary"
					(click)="confirm()">
					{{ t('Confirm') }}
				</button>
			</div>
		</ng-container>
	`,
	imports: [TranslocoModule],
})
export class ConfirmationModalComponent {
	title = signal('')
	description = signal('')

	private readonly _dialogRef = inject(DialogRef)

	constructor() {
		this.title.set(this._dialogRef.data.title)
		this.description.set(this._dialogRef.data.description)
	}

	confirm(): void {
		this._dialogRef.close(true)
	}

	cancel(): void {
		this._dialogRef.close(false)
	}
}