"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { ActionCardProps } from "@/types/homepage";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import WhiteBgLink from "@/ui/Button/WhiteBgButton";
import BlueArrow from "../../../../public/images/blue-arrow.svg"

export default function ActionCards({ two_cards = [] }: ActionCardProps) {
  const router = useRouter();

  if (!two_cards || two_cards.length === 0) return null;

  return (
    <section className="mb-16 md:mb-24" id="action-cards-section">
      <div className="container">

        {/* Banners Layout Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
          {two_cards?.map((card, index) => (
            <div
              key={index}
              className="relative overflow-hidden rounded-[16px] bg-[#02102E] min-h-[380px] sm:min-h-[320px] md:min-h-[300px] xl:min-h-[350px] p-6 sm:p-8 md:p-6 lg:p-10 flex flex-col justify-end group cursor-pointer after:absolute after:w-full after:h-full after:top-0 after:left-0 after:right-0 after:bg-[linear-gradient(253deg,rgba(0,32,79,0)_29.94%,#00204F_89.74%)] after:z-0"
            >
              {/* Background Image utilizing next/image fill */}
              {card.image && (
                <Image
                  src={card.image}
                  alt={"image"}
                  fill
                  sizes="(max-width: 768px) 100vw, 50vw"
                  className="object-cover transition-transform duration-700 ease-in-out group-hover:scale-105"
                  priority
                />
              )}

              {/* Card Contents */}
              <div className="relative z-10 space-y-6">
                <h3 className="text-[24px] sm:text-[28px] md:text-[24px] xl:text-[32px] font-bold text-white leading-[1.2] max-w-[410px]">
                  {card.heading}
                </h3>

                {card.cta?.toLowerCase().includes("pricing") ? (
                  <div
                    className="w-full sm:w-auto cursor-pointer"
                    onClick={(e) => {
                      e.preventDefault();
                      if (typeof window !== "undefined") {
                        sessionStorage.setItem("scrollToPricing", "true");
                      }
                      router.push("/ophthalmology/laser-vision-correction");
                    }}
                  >
                    <WhiteBgLink
                      href="#"
                      showArrow={true}
                      className="text-[#1718FF] w-full justify-center sm:w-auto"
                    >
                      {card.cta}
                    </WhiteBgLink>
                  </div>
                ) : (
                  <BookAnAppointmentModal
                    buttonBgClass="bg-white"
                    buttonTextClass="text-[#1718FF] w-full justify-center sm:w-auto"
                    className="text-[#1718FF]"
                    buttonText={card.cta}
                    arrowIcon={BlueArrow}
                  />
                )}
              </div>

            </div>
          ))}
        </div>

      </div>
    </section>
  );
}