"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 useHeroStepPresenter from "./useHeroStepPresenter";

const HeroStep = () => {
  const { errors, handleSubmit, onSubmit, register } = useHeroStepPresenter();
  return (
    <form
      className=" items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div className="flex flex-col gap-9">
        <ShowcaseSection
          title="Hero Information"
          className="flex flex-col gap-5"
        >
          <InputGroup
            {...register("key", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 200,
                message: FormErrorMessages.maxLength(200),
              },
            })}
            label="Key"
            name="key"
            required
            type="text"
            placeholder="Enter Key"
          />
          {errors.key && (
            <p className="mt-1 text-sm text-red-500">{errors.key.message}</p>
          )}
          <InputGroup
            {...register("title", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 200,
                message: FormErrorMessages.maxLength(200),
              },
            })}
            label="Title"
            name="title"
            required
            type="text"
            placeholder="Enter Title"
          />
          {errors.title && (
            <p className="mt-1 text-sm text-red-500">{errors.title.message}</p>
          )}
          <TextAreaGroup
            label="Description"
            {...register("description", {
              minLength: {
                value: 10,
                message: FormErrorMessages.minLength(10),
              },
              maxLength: {
                value: 1000,
                message: FormErrorMessages.maxLength(1000),
              },
            })}
            name="description"
            placeholder="Enter Description"
          />
          {errors.description && (
            <p className="mt-1 text-sm text-red-500">
              {errors.description.message}
            </p>
          )}
          <InputGroup
            {...register("button_text", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 50,
                message: FormErrorMessages.maxLength(50),
              },
            })}
            label="Button Text"
            name="button_text"
            required
            type="text"
            placeholder="Enter Button Text"
          />
          {errors.button_text && (
            <p className="mt-1 text-sm text-red-500">
              {errors.button_text.message}
            </p>
          )}
          <InputGroup
            {...register("button_link", {
              required: { message: FormErrorMessages.required, value: true },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 200,
                message: FormErrorMessages.maxLength(200),
              },
            })}
            label="Button Link"
            name="button_link"
            required
            type="url"
            placeholder="Enter Button Link"
          />
          {errors.button_link && (
            <p className="mt-1 text-sm text-red-500">
              {errors.button_link.message}
            </p>
          )}
        </ShowcaseSection>
      </div>
    </form>
  );
};

export default HeroStep;