import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';

/** Organism: site header with Rijksoverheid-style wordmark + title.
    ponytail: text wordmark instead of the licensed Rijksoverheid logo. */
@Component({
  selector: 'app-site-header',
  imports: [RouterLink],
  // :host display:block so the full-bleed bar fills the flex column (custom
  // elements default to display:inline, which collapsed the bar to its content).
  styles: [':host{display:block}'],
  template: `
    <header class="utrecht-page-header" style="background:var(--rhc-color-lintblauw-700,#154273);color:#fff;width:100%">
      <div style="display:flex;align-items:center;gap:1rem;max-width:var(--app-content-max);margin:0 auto;padding:1rem 1.5rem;box-sizing:border-box">
        <a routerLink="/dashboard" style="display:flex;align-items:center;gap:0.75rem;color:inherit;text-decoration:none">
          <span aria-hidden="true" style="display:inline-block;width:0.5rem;height:2.25rem;background:#fff"></span>
          <span style="font-weight:700;line-height:1.1">
            Rijksoverheid<br><span style="font-weight:400;font-size:0.9rem">BIG-register</span>
          </span>
        </a>
        <span style="margin-left:auto;font-weight:500">{{ subtitle() }}</span>
      </div>
    </header>
  `,
})
export class SiteHeaderComponent {
  subtitle = input('Mijn omgeving');
}