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

export default function RecoveryAftercare({ heading, description, cards = [] }: RecoveryStepsProps) {
    if (!heading && (!cards || cards.length === 0)) return null;

    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                <div className="max-w-[1064px] mx-auto">
                    <div className="max-w-[650px] mx-auto mb-8 md:mb-14 md:text-center">
                        <p className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.08em] mb-2 md:mb-3">
                            Recovery & aftercare
                        </p>
                        <h2 className="text-[28px] md:text-[42px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-3 md:mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] font-normal leading-[1.3] text-[#334D72]">
                            {description}
                        </p>
                    </div>

                    <div className="grid grid-cols-12 gap-4 md:gap-6">
                        {cards?.map((recoveryItem, index) => (
                            <article key={index} className="col-span-12 rounded-[10px] bg-[#F2F4F6] p-5 md:col-span-4 md:p-6">
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold leading-[1.3] mb-2">
                                    {recoveryItem.title}
                                </h3>
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4]">
                                    {recoveryItem.description}
                                </p>
                            </article>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}