import { Component, Input } from '@angular/core';
import { BaseFieldComponent, FieldConfig } from './base-field.component';

@Component({
  selector: 'app-number-field',
  template: `
    <div class="field-container">
      <label [for]="field.name" class="sq-form-label">
        <span class="label-text">{{ field.label }}</span>
        <span *ngIf="field.required" class="required-indicator">*</span>
      </label>
      <input 
        [id]="field.name"
        type="number"
        class="sq-form-input"
        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
        [value]="value"
        (input)="onChange($event.target.value)"
        [required]="field.required"
        [min]="field.min"
        [max]="field.max"
        [step]="field.step || 1"
        [readonly]="field.readonly"
        [disabled]="field.disabled"
      />
      <div *ngIf="field.description" class="field-description">
        {{ field.description }}
      </div>
      <div *ngIf="field.errorMessage" class="sq-error-message">
        {{ field.errorMessage }}
      </div>
    </div>
  `
})
export class NumberFieldComponent extends BaseFieldComponent {
  @Input() field: FieldConfig;
  @Input() value: number;
}