"use client";
import commonService from "@/lib/services/common";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import InputForm from "@/modules/ui/form/input-form";
import { toast } from "sonner";

const schema = z.object({
  email: z
    .string()
    .nonempty("Email is required")
    .email("Invalid email address"),
});
type FormData = z.infer<typeof schema>;

export default function Page() {
  const {
    register,
    reset,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    try {
      const response = await commonService.subscribeNewsletter(data?.email);

      if (response?.status || response?.success) {
        reset();
        toast.success("Your email subscription");
      } else {
      }
    } catch (error) {
      console.error("Subscribe error:", error);
    }
  };
  return (
    <div className="flex flex-col">
      <div className="mb-3 font-semibold text-neutral-black-87">
        Subscribe to our newsletters
      </div>
      <form onSubmit={handleSubmit(onSubmit)} className="lg:mt-1">
        <InputForm
          placeholder="Enter your email address"
          type="text"
          {...register("email")}
          errors={errors?.email?.message}
          isRequired
        />
        <button
          type="submit"
          className={`my-3 min-w-[96px] max-w-[112px] h-[38px] rounded-[12px] text-[13px] inline-flex justify-center items-center font-semibold border border-transparent text-white
            bg-primary hover:bg-primary/90
            `}
        >
          Subscribe
        </button>
      </form>
    </div>
  );
}