import { Component } from '@angular/core';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { MijnAanvragenSection } from '@registratie/ui/overzicht-secties/mijn-aanvragen.section';
import { WatMoetIkRegelenSection } from '@registratie/ui/overzicht-secties/wat-moet-ik-regelen.section';
import { MijnRegistratieSection } from '@registratie/ui/overzicht-secties/mijn-registratie.section';
import { SpecialismenSection } from '@registratie/ui/overzicht-secties/specialismen.section';
import { WatWiltUDoenSection } from './wat-wilt-u-doen.section';
import { BeheerLinksSection } from './beheer-links.section';

/** Page: "Mijn overzicht" — the portal home, following the NL Design System "Mijn
    omgeving" pattern. Composition only: each section below answers its own data
    question (own store, own async state) — four sections stay in `registratie/ui/overzicht-secties/`
    (they render registratie data), two live here (cross-context navigation). */
@Component({
  selector: 'app-overzicht-page',
  imports: [
    PageShellComponent,
    MijnAanvragenSection,
    WatMoetIkRegelenSection,
    MijnRegistratieSection,
    SpecialismenSection,
    WatWiltUDoenSection,
    BeheerLinksSection,
  ],
  template: `
    <app-page-shell
      i18n-heading="@@dashboard.heading"
      heading="Mijn overzicht"
      i18n-intro="@@dashboard.intro"
      intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken."
    >
      <div class="app-stack">
        <app-mijn-aanvragen-section />
        <app-wat-moet-ik-regelen-section />
        <app-mijn-registratie-section />
        <app-specialismen-section />
        <app-wat-wilt-u-doen-section />
        <app-beheer-links-section />
      </div>
    </app-page-shell>
  `,
})
export class OverzichtPage {}