tm_panel/src/app/marketing/_components/SectionStep.tsx

"use client";
import { TrashIcon } from "@/assets/icons";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import { REGEX } from "@/constants/regex";
import { FormErrorMessages } from "@/constants/Texts";
import {
  Control,
  FieldErrors,
  FieldValues,
  Path,
  UseFieldArrayAppend,
  UseFieldArrayRemove,
  UseFormHandleSubmit,
  UseFormRegister,
} from "react-hook-form";

interface IProps<T extends FieldValues> {
  title: string;
  fields: any[];
  handleSubmit: UseFormHandleSubmit<T>;
  onSubmit: (data: T) => void;
  register: UseFormRegister<T>;
  errors: FieldErrors<T>;
  append: UseFieldArrayAppend<T, any>;
  remove: UseFieldArrayRemove;
  control: Control<T, any>;
  fieldName: string;
  defaultValues: any;
}

const SectionStep = <T extends FieldValues>({
  title,
  fields,
  handleSubmit,
  onSubmit,
  register,
  errors,
  append,
  remove,
  fieldName,
  defaultValues,
}: IProps<T>) => {
  return (
    <form
      className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div className="flex flex-col gap-9">
        <ShowcaseSection
          title={`${title} Section`}
          className="flex flex-col gap-5"
        >
          <InputGroup
            {...register("title" as Path<T>, {
              required: { message: FormErrorMessages.required, value: true },
            })}
            label="Section Title"
            name="title"
            required
            type="text"
            placeholder="Enter Section Title"
          />
          {errors.title && (
            <p className="mt-1 text-sm text-red-500">
              {errors.title.message as string}
            </p>
          )}
          <TextAreaGroup
            label="Section Description"
            {...register("description" as Path<T>)}
            name="description"
            placeholder="Enter Section Description"
          />
        </ShowcaseSection>
        <ShowcaseSection
          title={`${title} cards`}
          className="flex flex-col gap-5"
        >
          {fields.map((field, index) => (
            <div
              key={field.id}
              className="grid grid-cols-1 gap-4 sm:grid-cols-2"
            >
              <InputGroup
                {...register(`cards.${index}.icon` as Path<T>, {
                  required: {
                    message: FormErrorMessages.required,
                    value: true,
                  },
                  pattern: {
                    message: FormErrorMessages.invalidPattern,
                    value: REGEX.URL,
                  },
                })}
                label="Icon"
                name={`cards.${index}.icon`}
                required
                type="text"
                placeholder="Enter Icon URL"
              />
              <InputGroup
                {...register(`cards.${index}.title` as Path<T>, {
                  required: {
                    message: FormErrorMessages.required,
                    value: true,
                  },
                })}
                label="Title"
                name={`cards.${index}.title`}
                required
                type="text"
                placeholder="Enter Title"
              />
              <TextAreaGroup
                {...register(`cards.${index}.description` as Path<T>)}
                label="Description"
                name={`cards.${index}.description`}
                placeholder="Enter Description"
                className="sm:col-span-2"
              />
              <button
                type="button"
                onClick={() => remove(index)}
                className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
              >
                <TrashIcon />
              </button>
            </div>
          ))}
          <button
            type="button"
            className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
            onClick={() => append(defaultValues)}
          >
            Add point
          </button>
        </ShowcaseSection>
      </div>
    </form>
  );
};

export default SectionStep;