"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";

const FooterStep = forwardRef((props, ref) => {
  const { errors, handleSubmit, onSubmit, register, getValues } =
    useFooterStepPresenter();

  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;