"use client";
import { forwardRef } from "react";
import SectionStep from "./SectionStep";
import useFeaturesStepPresenter, {
  IFeaturesStepFields,
} from "./useFeaturesStepPresenter";

interface FeaturesStepProps {
  initialData?: IFeaturesStepFields;
  onValidityChange?: (valid: boolean) => void;
}

const FeaturesStep = forwardRef<unknown, FeaturesStepProps>(
  ({ initialData, onValidityChange }, ref) => {
    const {
      errors,
      handleSubmit,
      onSubmit,
      register,
      fields,
      append,
      remove,
      control,
    } = useFeaturesStepPresenter(initialData, ref, onValidityChange);

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

FeaturesStep.displayName = "FeaturesStep";

export default FeaturesStep;