<div className="mb-10">

  <h2 className="mb-2 text-xl font-semibold">

    Can you list the key steps you need to take?

  </h2>

  <div className="flex flex-col gap-2">

    {stepFields.map((field, i) => (

      <FormField

        key={field.id}

        name={`steps[${i}].title`}

        render={() => (

          <FormItem>

            <div className="flex gap-2">

              <Button variant={"ghost"} onClick={() => removeStep(i)}>

                <LuTrash2 className="h-5 w-5" />

              </Button>

              <FormControl>

                <div className="flex w-full gap-2">

                  <Input

                    {...form.register(`steps.${i}.title`, {

                      required: true,

                    })}

                    placeholder={`Step ${i + 1}`}

                    className="w-full bg-zinc-50 p-2"

                  />

                  <Input

                    {...form.register(`steps.${i}.date`, {

                      required: true,

                    })}

                    type="date"

                  />

                </div>

              </FormControl>

            </div>

          </FormItem>

        )}

      />

    ))}

    <Button

      variant={"secondary"}

      className="border"

      onClick={() => addStep({ title: "", date: "" })}

      type="button"

    >

      Add step

    </Button>

  </div>

</div>;