import Image from 'next/image';
import ChildrenEarlyScreening from '../../../../public/images/children-early-screening-.png';
import WhiteArrow from '../../../../public/images/white-arrow.svg';
import { PediaticsEarlyScreeningProps } from "@/types/pediatrics";
import BookAnAppointmentModal from '@/components/CommonComponent/BookAppointmentModal';

export default function PediatricEarlyScreening({ title, image, heading, description, cta_text, number = [] }: PediaticsEarlyScreeningProps) {
    if (!heading && (!number || number.length === 0)) return null;

    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                <div className="grid md:grid-cols-12 items-center md:gap-5 xl:gap-10">
                    <div className="col-span-12 md:col-span-6">
                        <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] tracking-[0.5px] uppercase inline-block mb-3">
                            {title}
                        </span>
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.4] mb-6">
                            {description}
                        </p>
                        <figure className='block md:hidden mb-6'>
                            <Image className='w-full' src={image || ChildrenEarlyScreening} width={335} height={360} alt="chidren image" />

                        </figure>
                        {
                            number?.map((screeningItem, index) => (
                                <div key={index} className="mb-6 md:mb-10">
                                    <div className="grid grid-cols-12 gap-4">
                                        <div className="col-span-6 md:col-span-5">
                                            <h6 className="text-[28px] md:text-[40px] text-[#1718FF] font-medium leading-[1.3]">{screeningItem.count}</h6>
                                        </div>
                                        <div className="col-span-6 md:col-span-7">
                                            <p className="text-[18px] md:text-[20px] text-[#00204F] font-medium leading-[1.4] max-w-[230px]">{screeningItem.content}</p>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                        <BookAnAppointmentModal
                            buttonText={cta_text}
                            arrowIcon={WhiteArrow}
                            buttonTextClass='text-white w-full md:w-auto'
                        />
                    </div>
                    <div className="col-span-12 md:col-span-6">
                        <figure className='hidden md:block'>
                            <Image src={image || ChildrenEarlyScreening} width={610} height={740} alt="chidren image" />
                        </figure>
                    </div>
                </div>
            </div>
        </section>
    );
}