import type { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import { FormFieldComponent } from './form-field.component';
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';

const meta: Meta<FormFieldComponent> = {
  title: 'Molecules/Form Field',
  component: FormFieldComponent,
  decorators: [moduleMetadata({ imports: [TextInputComponent] })],
  render: (args) => ({
    props: args,
    template: `
      <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error">
        <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
      </app-form-field>`,
  }),
};
export default meta;
type Story = StoryObj<FormFieldComponent>;

export const Default: Story = {
  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers' },
};
export const WithError: Story = {
  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.' },
};
