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}
    .bar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-wit);inline-size:100%}
    .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-xl) var(--rhc-space-max-2xl);box-sizing:border-box}
    .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:inherit;text-decoration:none}
    .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-wit)}
    .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}
    .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm)}
    .portal{margin-inline-start:auto;font-weight:var(--rhc-text-font-weight-semi-bold)}
  `],
  template: `
    <header class="utrecht-page-header bar">
      <div class="inner">
        <a routerLink="/dashboard" class="brand">
          <span aria-hidden="true" class="mark"></span>
          <span class="name">
            Rijksoverheid<br><span class="sub">BIG-register</span>
          </span>
        </a>
        <span class="portal">{{ subtitle() }}</span>
      </div>
    </header>
  `,
})
export class SiteHeaderComponent {
  subtitle = input('Mijn omgeving');
}