"use client";
import { FaArrowRightLong } from "react-icons/fa6";
import { FaWhatsapp } from "react-icons/fa";
import { useRouter } from "next/navigation";

const PremiumBannerOne = ({ data, bannerImage }) => {
  const { header2, description2 } = data ?? {};
  const router = useRouter();
  const banner = bannerImage ?? "/consultation_banner_1.webp";
  return (
    <div
      className={"h-[45vh]   "}
      style={{
        backgroundImage: `url(${banner})`,
      }}
    >
      <div className="flex flex-col justify-start md:w-3/4 p-4 md:pl-32 md:pt-10 ">
        <h1 className="  md:text-2xl text-3xl md:text-left text-center mb-5 tracking-wider md:w-3/4 font-serif">
          {header2 ??
            "Personalized Rudraksha Consultation for Your Sacred Journey"}
        </h1>
        <h3 className="md:text-xl sm:text-left text-center text-zinc-800 sm:w-3/4">
          {description2 ??
            "Whether you seek clarity on selecting the right Rudraksha for your spiritual goals or a deeper understanding of the sacred beads, our consultations are crafted to provide you with the wisdom and direction you seek ."}
        </h3>
        {/* <div className="mt-6 flex gap-6 ">
          <button
            onClick={() =>
              router.push("/products/premium-rudraksha-consultation-astrology")
            }
            className="bg-[#b68d40] sm:py-2 p-2 sm:px-5 font-bold text-white sm:text-xl justify-center sm:whitespace-nowrap flex items-center sm:gap-3"
          >
            Book a consultation{" "}
            <FaArrowRightLong className="sm:my-3" size={26} />
          </button>
        </div> */}
      </div>
    </div>
  );
};

export default PremiumBannerOne;