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

interface ChallengesStepProps {
  initialData?: IChallengesStepFields;
  onValidityChange?: (valid: boolean) => void;
}

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

    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;