import { Component, EventEmitter, Input, Output } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';

@Component({
  selector: 'app-error-state',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <div
      role="alert"
      class="flex flex-col items-center justify-center rounded-2xl border border-red-200 bg-red-50 px-6 py-12 text-center dark:border-red-900/50 dark:bg-red-950/30"
    >
      <svg class="h-8 w-8 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
        <line x1="12" y1="9" x2="12" y2="13" />
        <line x1="12" y1="17" x2="12.01" y2="17" />
      </svg>
      <p class="mt-3 text-sm font-medium text-red-700 dark:text-red-300">{{ message }}</p>
      @if (showRetry) {
        <button type="button" (click)="retry.emit()" class="btn-secondary mt-5">
          {{ 'common.tryAgain' | translate }}
        </button>
      }
    </div>
  `,
})
export class ErrorStateComponent {
  @Input({ required: true }) message!: string;
  @Input() showRetry = false;
  @Output() retry = new EventEmitter<void>();
}
