"use client";

import Image from "next/image";
import LaserVisionBannerI from "../../../../public/images/laser-banner.png";
import ServicesBannerMobileImage from "../../../../public/images/laser-mobile-banner.png";
// import WhiteBgLink from "@/ui/Button/WhiteBgButton";
import BlueArrow from "../../../../public/images/dark-blue-arrow.svg";
import { ServiceBannerProps } from "@/types/laser-vision";
import BookAnAppointmentModal from "../BookAppointmentModal";
import { getImageSrc } from "@/utils/image";

export default function ServicesBanner({ heading, description, image, mob_image, cta, cta_link, pricing_link, className, maxWidthClasses, maxWidthDescriptionClasses }: ServiceBannerProps) {
    if (!heading) return null;
    const desktopBanner = getImageSrc(image) || LaserVisionBannerI;
    const mobileBanner = getImageSrc(mob_image) || ServicesBannerMobileImage;

    return (
        <>
            <section className={`${className} md:px-5`}>
                <div className="relative z-0">
                    <div className="md:block hidden">
                        <figure
                            className="relative after:content-[''] after:absolute after:top-0 after:left-0 after:right-0 after:w-full after:h-full after:rounded-[16px] after:bg-[linear-gradient(71deg,_rgba(0,32,79,0.64)_43.76%,_rgba(0,73,181,0)_66.89%)]"
                        >
                            <Image className="w-full h-auto rounded-[16px]" src={desktopBanner} width={1440} height={763} alt="Banner Image" priority />
                        </figure>
                    </div>
                    <div className="md:hidden block">
                        <figure
                            className="relative after:content-[''] after:absolute after:top-0 after:left-0 after:right-0 after:w-full after:h-full after:bg-[linear-gradient(48deg,rgba(0,32,79,0.64)_50.2%,rgba(0,73,181,0)_72.98%)]"
                        >
                            <Image className="w-full h-full" src={mobileBanner} width={390} height={540} alt="Banner Image" priority />
                        </figure>
                    </div>

                    <div className="absolute inset-0 z-[1]">
                        <div className="container h-full flex flex-col justify-end md:justify-center items-stretch px-5 !pb-10 md:!pt-5 md:pb-10" >
                            <div>
                                <h1 className={`text-[24px] md:text-[36px] xl:text-[48px] text-white font-medium leading-[1.2] mb-5 md:mb-6 ${maxWidthClasses}`}>
                                    {heading}
                                </h1>
                                <p className={`text-[16px] md:text-[16px] xl:text-[20px] text-white !font-normal leading-[1.3] mb-6 md:mb-8 xl:mb-12 ${maxWidthDescriptionClasses}`}>
                                    {description}
                                </p>
                                <div className="flex flex-col sm:flex-row gap-3">
                                    <BookAnAppointmentModal
                                        buttonBgClass="bg-[#fff]"
                                        buttonTextClass="text-[#00204F] justify-center"
                                        buttonText={cta}
                                        arrowIcon={BlueArrow}
                                    />

                                    {/* {showPricingButton && (
                                        <div
                                            className="w-full sm:w-auto cursor-pointer"
                                            onClick={(e) => {
                                                e.preventDefault();
                                                const targetId = pricing_link || "#pricing";
                                                const id = targetId.startsWith("#") ? targetId.substring(1) : targetId;
                                                document.getElementById(id)?.scrollIntoView({
                                                    behavior: "smooth",
                                                });
                                            }}
                                        >
                                            <WhiteBgLink
                                                href="#"
                                                className="w-full justify-center sm:w-auto"
                                            >
                                                Discover our pricing
                                            </WhiteBgLink>
                                        </div>
                                    )} */}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section >
        </>
    )
}