Select

"use client";

import { useForm } from "@tanstack/react-form";
import { ErlForm } from "erlangform";
import { schema, type FormValues } from "./schema";

export default function SelectForm() {
  const form = useForm({
    defaultValues: { country: "id" },
    validators: { onChange: schema },
    onSubmit: ({ value }) => console.log(value),
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <ErlForm<FormValues>
        form={form}
        schema={schema}
        fieldConfig={{
          country: {
            label: "Country",
            options: [
              { label: "Indonesia", value: "id" },
              { label: "Japan", value: "jp" },
            ],
          },
        }}
      />
      <button type="submit">Simpan negara</button>
    </form>
  );
}