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

/** Molecule: form field = label + projected control + optional error/description.
    Reused by both the login form and the change-request form. */
@Component({
  selector: 'app-form-field',
  template: `
    <div class="rhc-form-field utrecht-form-field" [class.utrecht-form-field--invalid]="!!error()">
      <label class="utrecht-form-label" [for]="fieldId()">{{ label() }}</label>
      @if (description()) {
        <div class="utrecht-form-field-description">{{ description() }}</div>
      }
      <ng-content />
      @if (error()) {
        <div class="utrecht-form-field-error-message" role="alert">{{ error() }}</div>
      }
    </div>
  `,
})
export class FormFieldComponent {
  label = input.required<string>();
  fieldId = input.required<string>();
  description = input<string>();
  error = input<string>();
}