"use client";

import { ImplantsTechinquesProps } from "@/types/cataract";


export default function ImplantsTechinques({ title, heading, description, cards_content = [], className, columns, removeBgColour }: ImplantsTechinquesProps) {
    return (
        <section className={`${className} bg-[#F2F4F6] py-16 md:py-30`}>
            <div className="container">
                {/* Header Grid Section */}
                <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-${columns} gap-4 md:gap-5`}>
                    {(cards_content ?? []).map((implantsItem, index) => (
                        <div
                            key={index}
                            className="w-full h-full bg-white p-4 md:p-6 rounded-[16px]"
                        >
                            {
                                implantsItem?.tag &&
                                <span className={`${removeBgColour} text-[14px] text-[#1718FF] font-bold py-1 px-3 bg-[#E8F1FF] border border-[#B3CCFF] rounded-[100px] inline-block mb-2 `}>{implantsItem.tag}</span>
                            }
                            <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold mb-3">
                                {implantsItem.title}
                            </h3>
                            <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4]">
                                {implantsItem.description}
                            </p>
                        </div>
                    ))}
                </div>
                {/* </div> */}
            </div>
        </section>
    );
}