"use client";
import { forwardRef, useImperativeHandle } from "react";
import SectionStep from "./SectionStep";
import useBenefitsStepPresenter, {
  IBenefitsStepFields,
} from "./useBenefitsStepPresenter";

interface BenefitsStepProps {
  initialData?: IBenefitsStepFields;
}

const BenefitsStep = forwardRef<unknown, BenefitsStepProps>(({ initialData }, ref) => {
  const {
    errors,
    handleSubmit,
    onSubmit,
    register,
    fields,
    append,
    remove,
    control,
    getValues,
  } = useBenefitsStepPresenter(initialData);

  useImperativeHandle(ref, () => ({
    getData: () => getValues(),
  }));

  return (
    <SectionStep<IBenefitsStepFields>
      title="Benefits"
      fields={fields}
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
      register={register}
      errors={errors}
      append={append}
      remove={remove}
      control={control}
      fieldName="cards"
      defaultValues={{ icon: "", title: "", description: "" }}
    />
  );
});

BenefitsStep.displayName = "BenefitsStep";

export default BenefitsStep;
