import { PediatricsExaminationConductedProps } from "@/types/pediatrics"


export default function PediatricsExaminationConducted({ title, heading, description, practice_text, practice_description, surgery_steps = [] }: PediatricsExaminationConductedProps) {
    if (!heading && (!surgery_steps || surgery_steps.length === 0)) return null;

    return (
        <section className="mb-16 md:mb-30 xl:mb-40">
            <div className="container">
                <div className="grid md:grid-cols-12 gap-4 md:gap-5 mb-8 md:mb-10 xl:mb-14">
                    <div className="col-span-12 md:col-span-6">
                        <span className="text-[12px] md:text-[14px] font-normal text-[#334D72] tracking-[0.5px] uppercase inline-block mb-2">
                            {title}
                        </span>
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.2] ">
                            {heading}
                        </h2>
                    </div>
                    <div className="col-span-12 md:col-span-6 md:flex md:items-end">
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3]">
                            {description}
                        </p>
                    </div>
                </div>

                <div className='grid md:grid-cols-12 xl:grid-cols-12 gap-4 md:gap-8 xl:gap-x-10 xl:gap-y-14 mb-8 md:mb-10 xl:mb-14'>
                    {surgery_steps?.map((childrenItem, index) => (
                        <div key={index}
                            className={` md:col-span-4 
                                ${index === 3 ? "md:col-start-3" : ""}
                                ${index === 4 ? "md:col-start-7" : ""}
                           `}
                        >
                            <div className="w-full h-full bg-white border border-[#CCD2DC] p-4 md:p-6 rounded-[16px]">
                                <span className="text-[32px] md:text-[40px] font-medium text-[#1718FF] block mb-2">
                                    {childrenItem.Number}
                                </span>
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold pb-4 md:pb-6 border-b border-[#E5E9ED] mb-4 md:mb-6">
                                    {childrenItem.title}
                                </h3>
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4]">
                                    {childrenItem.description}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
                <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] text-center max-w-[946px] mx-auto">
                    <span className="text-[#0C0FFF] font-bold">{practice_text}</span>
                    {practice_description}
                </p>
            </div>
        </section>
    )
}