import Image from "next/image";
import CheckIcon from "../../../../public/images/green-check.svg";
import { OurTreatmentProps } from "@/types/cataract";

export default function OurTreatment({ title, heading, description, treat_cards, columns }: OurTreatmentProps) {
    return (
        <section className=" mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                <div className="grid grid-cols-12 md:gap-5  mb-8 md:mb-14 ">
                    <div className="col-span-12 md:col-span-6">
                        <p className="text-[12px] md:text-[14px] text-[#00204F] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                            {title}
                        </p>
                        <h2 className="text-[28px] md:text-[32px] xl:text-[40px] text-[#00204F] font-medium leading-[1.15] max-w-[500px] 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">
                    {treat_cards?.map((treatment, index) => (
                        <div key={index} className={`col-span-12 md:col-span-${columns}`}>
                            <article key={index} className=" bg-white h-full rounded-[16px] border border-[#CCD2DC] p-4 md:p-6">
                                <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>
                                <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>
    );
}