import { newsletterValidationSchema } from "@/utils/form";
import { yupResolver } from "@hookform/resolvers/yup";
import React from "react";
import { useForm } from "react-hook-form";

function Newsletter() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(newsletterValidationSchema),
  });
  return (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* CTA box */}
        <div
          className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
          data-aos="fade-up"
        >
          <div className="relative flex flex-col lg:flex-row justify-between items-center">
            <div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2 text-primary-content">
              <h3 className=" mb-2 text-3xl font-black">
                Stay Ahead of the Curve
              </h3>
              <p className=" text-lg">
                Join our newsletter to get top news before anyone else.
              </p>
            </div>

            <div className="w-full lg:w-1/2">
              <form
                onSubmit={handleSubmit((data) => {
                  console.log(data);
                  reset();
                })}
                className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none gap-x-2"
              >
                <div className="w-full">
                  <input
                    id="NewsletterEmail"
                    type="text"
                    className="py-3 px-4 block w-full text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                    placeholder="Email…"
                    aria-label="Email…"
                    {...register("email")}
                  />
                  <div className="text-start text-sm italic text-error-content">
                    {errors.email?.message}&nbsp;
                  </div>
                </div>
                <button className="btn text-primary-content btn-neutral">
                  Subscribe
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Newsletter;