import Image from 'next/image';
import Tickmark from "../../../../public/images/tick-mark.svg"
import { PediatricsWarningSignsProps } from "@/types/pediatrics";
import BookAnAppointmentModal from '@/components/CommonComponent/BookAppointmentModal';
import WhiteArrow from "../../../../public/images/white-arrow.svg";


export default function PediatricsWarningSigns({ title, heading, description, cta_text, points = [] }: PediatricsWarningSignsProps) {
    if (!heading && (!points || points.length === 0)) return null;

    return (
        <section className="mb-16 md:mb-30 xl:mb-40">
            <div className="container">
                <div className="max-w-[650px] mx-auto">
                    <span className="text-[14px] font-medium text-[#334D72] tracking-[0.5px] md:text-center uppercase block mb-2 md:mb-5">
                        {title}
                    </span>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] md:text-center mb-3 md:mb-5">
                        {heading}
                    </h2>
                    <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] md:text-center mb-8 md:mb-10 xl:mb-14">
                        {description}
                    </p>


                    <ul className='p-4 md:p-8 xl-p-10 border border-[#E5E9ED] rounded-[16px] w-full max-w-[520px] mx-auto mb-8  md:mb-10 xl:mb-14'>
                        {
                            points?.map((Item, index) => (
                                <li key={index} className="flex items-start gap-3 mb-2 md:mb-3 last:mb-0">
                                    <Image src={Tickmark} width={24} height={24} alt="tick mark" />
                                    <p>{Item.points}</p>
                                </li>
                            ))
                        }
                    </ul>
                    <div className="text-center">
                        <BookAnAppointmentModal
                            buttonText={cta_text}
                            arrowIcon={WhiteArrow}
                            className='w-full md:w-auto'
                        />
                    </div>

                </div>
            </div>
        </section>
    )
}