import { Component, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormFieldComponent } from '../../molecules/form-field/form-field.component';
import { TextInputComponent } from '../../atoms/text-input/text-input.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { HeadingComponent } from '../../atoms/heading/heading.component';

/** Organism: DigiD-style mock login. No real auth — just composes atoms/molecules. */
@Component({
  selector: 'app-login-form',
  imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent, HeadingComponent],
  template: `
    <form (ngSubmit)="submit.emit()" style="max-width:24rem">
      <app-heading [level]="1">Inloggen</app-heading>
      <p class="rhc-paragraph">Log in op uw persoonlijke BIG-register omgeving.</p>

      <app-form-field label="BSN" fieldId="bsn" description="9 cijfers (demo: vul iets in)">
        <app-text-input inputId="bsn" [(ngModel)]="bsn" name="bsn" placeholder="123456789" />
      </app-form-field>

      <app-form-field label="Wachtwoord" fieldId="pw">
        <app-text-input inputId="pw" type="password" [(ngModel)]="password" name="pw" />
      </app-form-field>

      <div style="margin-top:1rem">
        <app-button type="submit" variant="primary">Inloggen met DigiD</app-button>
      </div>
    </form>
  `,
})
export class LoginFormComponent {
  bsn = '';
  password = '';
  submit = output<void>();
}