import { AestheticTreatmentProps } from "@/types/hyluronic-acid";

export default function AestheticOurTreatment({ title, heading, description, pediatric_care = [], columns }: AestheticTreatmentProps) {
    return (
        <section className=" py-16 md:py-24 xl:py-30">
            <div className="container">
                <div className="grid grid-cols-12 items-end  md:gap-5  mb-8 md:mb-14 ">
                    <div className="col-span-12 md:col-span-6">
                        {
                            title && (
                                <span className="text-[12px] md:text-[14px] text-[#00204F] font-medium uppercase tracking-[0.5px] block mb-2 md:mb-3">
                                    {title}
                                </span>
                            )
                        }
                        <h2 className="text-[28px] md:text-[32px] xl:text-[40px] text-[#00204F] font-medium leading-[1.15]  mb-3 md:mb-0">
                            {heading}
                        </h2>
                    </div>
                    <div className="col-span-12 md:col-span-6">
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.4]">
                            {description}
                        </p>
                    </div>
                </div>

                <div className="grid grid-cols-12 gap-5 md:gap-6">
                    {(pediatric_care ?? []).map((treatment, index) => (
                        <div key={index} className={`col-span-12 md:col-span-${columns} `}>
                            <article key={index} className=" bg-white rounded-[16px] border border-[#CCD2DC] p-4 md:p-6 h-full">
                                {
                                    treatment.tags && (
                                        <span className="text-[12px] md:text-[14px] font-bold text-[#1718FF] bg-[#E8F1FF] border border-[#B3CCFF] rounded-full inline-block px-3 py-1 mb-2">
                                            {treatment.tags}
                                        </span>
                                    )
                                }
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold leading-[1.3] border-b border-[#E5E9ED] pb-3 mb-3 md;pb-6 md:mb-6">
                                    {treatment.title}
                                </h3>
                                <div className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.4]" dangerouslySetInnerHTML={{ __html: treatment.description }}>

                                </div>

                                {/* <ul className="space-y-3 md:space-y-4">
                                    {treatment.points?.map((treatmentItem, index) => (
                                        <li key={index} className="text-[14px] md:text-[16px] text-[#00204F] font-medium flex items-start gap-2 leading-[1.4] ">
                                            <Image src={CheckIcon} alt="icon" width={18} height={18} className="mt-[1px] shrink-0" />
                                            <span>{treatmentItem.point}</span>
                                        </li>
                                    ))}
                                </ul> */}
                            </article>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}