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

"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import { FormErrorMessages } from "@/constants/Texts";
import { forwardRef, useImperativeHandle } from "react";
import useFooterStepPresenter from "./useFooterStepPresenter";

interface FooterStepProps {
  initialData?: any;
}

const FooterStep = forwardRef<unknown, FooterStepProps>(
  ({ initialData }, ref) => {
    const { errors, handleSubmit, onSubmit, register, getValues } =
      useFooterStepPresenter(initialData);

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

    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)}
      >
        <ShowcaseSection title="Footer Section" className="flex flex-col gap-5">
          <div className="flex flex-col gap-9">
            <InputGroup
              {...register("email", {
                required: { message: FormErrorMessages.required, value: true },
                pattern: {
                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                  message: "Invalid email format",
                },
              })}
              label="Email"
              name="email"
              required
              type="email"
              placeholder="Enter Email"
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-500">
                {errors.email.message as string}
              </p>
            )}
            <InputGroup
              {...register("phone")}
              label="Phone Number"
              name="phone"
              type="text"
              placeholder="Enter Phone Number"
            />
            <InputGroup
              {...register("location")}
              label="Location"
              name="location"
              type="text"
              placeholder="Enter Location"
            />
            <TextAreaGroup
              label="Tagline"
              {...register("tagline")}
              name="tagline"
              placeholder="Enter Tagline"
            />
            <InputGroup
              {...register("copyright")}
              label="Copyright"
              name="copyright"
              type="text"
              placeholder="Enter Copyright Text"
            />
          </div>
        </ShowcaseSection>
      </form>
    );
  },
);

FooterStep.displayName = "FooterStep";

export default FooterStep;