import { ArrayField, Field, useForm } from '@oxform/react';
import { z } from 'zod';

const schema = z.object({
  tags: z.string().array(),
});

function TagsForm() {
  const form = useForm({ schema, defaultValues: { tags: ['alpha'] } });

  return (
    <ArrayField form={form} name='tags'>
      {tags => (
        <>
          {tags.ids.map((id, index) => (
            <div key={id}>
              <Field form={form} name={`tags.${index}`}>
                {field => <input {...field.props} />}
              </Field>
              <button type='button' onClick={() => tags.remove(index)}>
                Remove
              </button>
            </div>
          ))}
          <button type='button' onClick={() => tags.append('')}>
            Add tag
          </button>
        </>
      )}
    </ArrayField>
  );
}