import Image from 'next/image';
import TickMark from '../../../../public/images/tick-mark.svg'
import WhiteArrow from '../../../../public/images/white-arrow.svg';
import RequestCostImage from "../../../../public/images/request-cost.png"
import { RequestCostResourceProps } from '@/types/cataract';
import BookAnAppointmentModal from '../BookAppointmentModal';

export default function RequestCostResources({ image, heading, description, cta_link, cta, sub_text, points = [] }: RequestCostResourceProps) {
    if (!heading && (!points || points.length === 0)) return null;

    const displayImage = image && image.trim() !== "" ? image : RequestCostImage;

    return (
        <section className="bg-[#00204F] py-16 md:py-30 mb-16 md:mb-30">
            <div className="container">
                <div className="grid md:grid-cols-12 gap-6 md:gap-10">
                    <div className="md:col-span-6">
                        <span className="text-[12px] md:text-[14px] text-white font-medium tracking-[0.5px] uppercase block  mb-3">REQUEST COSTS & RESOURCES</span>
                        <h2 className="text-[32px] md:text-[48px] text-white font-medium leading-[1.2] mb-4">{heading}</h2>
                        <div className="block lg:hidden relative w-full h-[240px] sm:h-[340px] md:h-[400px] mb-8">
                            <Image
                                src={displayImage}
                                alt="State of the art laser surgery room"
                                fill
                                sizes="(max-width: 1024px) 100vw, 1px"
                                className="object-cover w-full h-full rounded-[24px]"
                                priority={Boolean(image && image.trim() !== "")}
                            />
                        </div>
                        <p className='text-[18px] md:text-[20px] text-[#CCD2DC] font-normal leading-[1.3] mb-6'>{description}.</p>
                        <ul className='space-y-3 md:space-y-4 border-b border-[#4D6384] pb-6 md:pb-10 mb-6 md:mb-10'>
                            {
                                points?.map((item, index) => (
                                    <li key={index} className="flex items-start gap-2">
                                        <Image
                                            src={TickMark}
                                            width={24}
                                            height={24}
                                            alt="tick-mark"
                                            className="shrink-0"
                                        />
                                        <span className='text-[16px] md:text-[18px] text-[#CCD2DC] font-medium leading-[1.4] inline-block'>{item.title}</span>
                                    </li>
                                ))
                            }
                        </ul>
                        <p className="text-[18px] text-[#CCD2DC] font-normal mb-8">{sub_text}</p>
                        <div className="md:flex gap-4 space-y-4 md:space-y-0">
                            {cta && cta_link &&
                                // <BlueCtaLink href={cta_link} children={cta} className='w-full md:w-auto justify-center'></BlueCtaLink>
                                // <BookAnAppointmentModal
                                //     buttonBgClass="bg-transparent border border-[#fff]"
                                //     buttonTextClass="text-[#fff]"
                                //     buttonText={cta}
                                //     arrowIcon={WhiteArrow}
                                // />

                                <BookAnAppointmentModal
                                    buttonBgClass="bg-[#1718FF] w-full justify-center md:w-auto"
                                    buttonTextClass="text-[#fff]"
                                    buttonText={cta}
                                    arrowIcon={WhiteArrow}
                                />
                            }
                        </div>
                    </div>
                    <div className="md:col-span-6">
                        <figure className="hidden lg:block relative after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:w-full after:h-full after:rounded-[16px] after:bg-[linear-gradient(224deg,rgba(11,61,136,0)_57.23%,#0B3D88_99.07%)]">
                            <Image
                                src={displayImage}
                                width={630}
                                height={602}
                                alt="stateof laser surgery clinic"
                                className=" w-full h-full rounded-[16px]"
                                priority={Boolean(image && image.trim() !== "")}
                            />
                        </figure>
                    </div>



                </div>

            </div>
        </section>
    )
}