import { LiveBookingProps } from "@/types/homepage";
import BookAnAppointmentModal from "../BookAppointmentModal";
import DarkBlueArrow from '../../../../public/images/dark-blue-arrow.svg';


export default function LiveBooking({ title, heading, description, cta }: LiveBookingProps) {
    if (!heading && !title) return null;
    return (
        <>
            <section className="relative bg-[#00204F] py-16 md:py-[80px] xl:py-[120px] mb-[80px] z-0 after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:top-0 after:w-full after:h-full after:bg-no-repeat after:bg-cover md:after:bg-cover xl:after:bg-contain after:bg-center after:bg-[url(/images/live-res-circle.png)] md:after:bg-[url(/images/live-circle.png)] z-0">
                <div className="container">
                    <div className="text-center relative z-1">
                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#00D8F6]/30 bg-[#00D8F6]/10  mb-3">
                            <span className="relative flex h-2 w-2">
                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00D8F6] opacity-75"></span>
                                <span className="relative inline-flex rounded-full h-2 w-2 bg-[#00D8F6]"></span>
                            </span>
                            <span className=" text-[12px] md:text-[14px] text-[#00D8F6] inline-block font-bold">{title}</span>
                        </div>
                        <h2 className="text-[32px] md:text-[48px] xl:text-[56px] text-white font-medium leading-[1.1] tracking-[0.5px] mb-4 max-w-[270px] mx-auto md:max-w-none md:mx-0">{heading}</h2>
                        <p className="text-[16px] md:text-[20px] text-[#E5E9ED] font-medium mb-8 md:mb-12">{description}</p>
                        {/* <WhiteBgLink href={cta_link || "/"}>{cta || ""}</WhiteBgLink> */}
                        <BookAnAppointmentModal
                            buttonText={cta}
                            buttonBgClass="bg-white"
                            buttonTextClass="text-[#00204F]"
                            arrowIcon={DarkBlueArrow}
                        />
                    </div>

                </div>

            </section>
        </>
    )
}