import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig, moduleMetadata } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { PageShellComponent } from './page-shell.component';
import { ButtonComponent } from '@shared/ui/button/button.component';

const meta: Meta<PageShellComponent> = {
  title: 'Design System/Templates/PageShell',
  component: PageShellComponent,
  decorators: [
    applicationConfig({ providers: [provideRouter([])] }),
    moduleMetadata({ imports: [ButtonComponent] }),
  ],
  render: (args) => ({
    props: args,
    template: `
      <app-page-shell [heading]="heading" [intro]="intro" [backLink]="backLink" [width]="width">
        <p class="rhc-paragraph">Pagina-inhoud wordt hier geprojecteerd.</p>
        <app-button variant="primary">Een actie</app-button>
      </app-page-shell>`,
  }),
};
export default meta;
type Story = StoryObj<PageShellComponent>;

export const Default: Story = {
  args: { heading: 'Mijn BIG-registratie', intro: 'Overzicht van uw registratie.' },
};
export const WithBackLink: Story = {
  args: { heading: 'Mijn gegevens', backLink: '/dashboard' },
};
export const Narrow: Story = {
  args: { heading: 'Inloggen', width: 'narrow', intro: 'Log in op uw omgeving.' },
};