import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { SectionConfig } from '../../shared/models/config';
import { FooterWidgetData } from '../contracts/widget-data.contract';

export interface FooterNavigationLink {
  id: string;
  label: string;
  href: string;
}

@Component({
  selector: 'app-footer-navigation-widget',
  standalone: true,
  imports: [CommonModule],
  template: `
    <footer class="footer-nav-widget">
      <nav>
        <ul>
          @for (link of data?.links ?? []; track link.id) {
            <li>
              <button type="button" (click)="onLinkClick(link)">{{ link.label }}</button>
            </li>
          }
        </ul>
      </nav>
    </footer>
  `,
  styles: [
    `
      .footer-nav-widget { padding: 1rem 0; border-top: 1px solid var(--border-color, #d3dad9); }
      ul { display: flex; gap: var(--space-sm, 8px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

      button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border: none;
        border-radius: var(--radius-md, 12px);
        background: transparent;
        color: var(--text-secondary, #667a77);
        font: inherit;
        cursor: pointer;
        transition: background-color var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
      }

      button:hover {
        background: var(--bg-secondary, #f5f5f5);
        color: var(--primary-color, #497671);
      }

      button:focus-visible {
        outline: 2px solid var(--primary-color, #497671);
        outline-offset: 2px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FooterNavigationWidgetComponent {
  @Input() section: SectionConfig | null = null;
  @Input() data: FooterWidgetData | null = null;

  @Output() linkSelected = new EventEmitter<FooterNavigationLink>();

  onLinkClick(link: FooterNavigationLink): void {
    this.linkSelected.emit(link);
  }
}
