"use client";
import { forwardRef, useImperativeHandle } from "react";
import SectionStep from "./SectionStep";
import useChallengesStepPresenter, {
  IChallengesStepFields,
} from "./useChallengesStepPresenter";

interface ChallengesStepProps {
  initialData?: IChallengesStepFields;
}

const ChallengesStep = forwardRef<unknown, ChallengesStepProps>(
  ({ initialData }, ref) => {
    const {
      errors,
      handleSubmit,
      onSubmit,
      register,
      fields,
      append,
      remove,
      control,
      getValues,
    } = useChallengesStepPresenter(initialData);

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

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

ChallengesStep.displayName = "ChallengesStep";

export default ChallengesStep;
