import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { TranslatePipe } from '../../i18n/translate.pipe';

@Component({
  selector: 'app-unknown-widget',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <section class="unknown-widget" role="status" aria-live="polite">
      <strong>{{ 'widgets.unavailable' | translate }}</strong>
      <p>{{ widgetType }}@{{ widgetVersion }}</p>
    </section>
  `,
  styles: [
    `
      .unknown-widget {
        border: 1px dashed var(--border-color, #d3dad9);
        border-radius: var(--radius-md, 12px);
        padding: 0.75rem;
        color: var(--text-secondary, #667a77);
        background: var(--background-secondary, #f5f5f5);
      }

      .unknown-widget strong {
        display: block;
        font-size: 0.9rem;
      }

      .unknown-widget p {
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UnknownWidgetComponent {
  @Input() widgetType: string = 'unknown';
  @Input() widgetVersion: string = 'unknown';
}
