"use client";

import { SafetyAndRiskProps } from "@/types/laser-vision";


export default function SafetyRisks({ title, heading, description, safety_cards = [], className = "", columns = 2 }: SafetyAndRiskProps) {
    if (!heading && (!safety_cards || safety_cards.length === 0)) return null;

    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-10 md:mb-14">
                    <div className="col-span-12 md:col-span-6">
                        <span className="text-[12px] md:text-[14px] font-medium 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="-mx-5 md:mx-0 overflow-x-auto md:overflow-visible scrollbar-none"> */}
                <div className={`grid md:grid-cols-${columns}  gap-4 md:gap-5`}>
                    {safety_cards?.map((riskCard, index) => (
                        <div
                            key={index}
                            className="w-full h-full bg-white p-4 md:p-6 rounded-[16px]"
                        >
                            <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold mb-3">
                                {riskCard.title}
                            </h3>
                            <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4]">
                                {riskCard.description}
                            </p>
                        </div>
                    ))}
                </div>
                {/* </div> */}
            </div>
        </section>
    );
}