"use client";

import Image from "next/image";
import { WhyChooseOculusProps } from "@/types/laser-vision";


export default function WhyChooseOculus({ heading, description, cards_content = [], className = "" }: WhyChooseOculusProps) {
    if (!heading && (!cards_content || cards_content.length === 0)) return null;

    return (
        <section className={`${className} bg-[#F2F4F6] py-16 md:py-30 overflow-hidden`}>
            <div className="container">
                {/* Header Grid Section */}
                <div className="grid md:grid-cols-12 gap-6 md:gap-10 mb-10 md:mb-16">
                    <div className="col-span-12 md:col-span-6">
                        {/* <span className="text-[12px] md:text-[14px] font-normal text-[#334D72] tracking-[0.5px] uppercase block mb-2">
                           Why choose Oculus
                        </span> */}
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.3] my-3 w-full">
                            {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>

                {/* Mobile: full-bleed horizontal scroll; Desktop: 4-column grid */}
                <div className="-mx-5 md:mx-0 overflow-x-auto md:overflow-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                    <div className="flex md:grid md:grid-cols-4 gap-4 md:gap-6 px-5 md:px-0 snap-x snap-mandatory">
                        {cards_content?.map((cardItem, index) => (
                            <div
                                key={index}
                                className="w-[calc(75vw-20px)] max-w-[260px] md:w-auto md:max-w-none shrink-0 snap-start flex flex-col bg-white p-5 md:p-6 rounded-[16px]"
                            >
                                <figure className="w-16 h-16 md:w-18 md:h-18 rounded-full bg-[#E8F1FF] flex items-center justify-center mb-8 md:mb-12 shrink-0">
                                    <Image src={cardItem.image} width={40} height={40} alt="icon" className="" />
                                </figure>
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-medium leading-[1.3] flex-grow">
                                    {cardItem.title}
                                </h3>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}