"use client";

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

export default function LaserVisualConditions({ title, heading, description, cards = [], className = "" }: LaserVisualConditionsProps) {
    if (!heading && (!cards || cards.length === 0)) return null;

    return (
        <section className={`${className} overflow-hidden`}>
            <div className="container">
                {/* Header Grid Section */}
                <div className="grid md:grid-cols-12 gap-3 md:gap-8 mb-10 md:mb-16">
                    <div className="col-span-12 md:col-span-6">
                        <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] tracking-[0.5px] uppercase block mb-2">
                            {title}
                        </span>
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.1] my-3 w-full max-w-[440px]">
                            {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 scrollable flex layout, desktop 4-column grid layout */}
                <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-10 px-5 md:px-0 snap-x snap-mandatory">
                        {cards?.map((cond, 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 h-full"
                            >
                                <figure className="relative w-full aspect-[4/3]  overflow-hidden shadow-xs border border-slate-100 shrink-0 mb-4">
                                    <Image
                                        src={cond.image}
                                        alt={cond.title}
                                        fill
                                        sizes="(max-width: 768px) 260px, (max-width: 1024px) 25vw, 320px"
                                        className="rounded-[16px]"
                                    />
                                </figure>
                                <h3 className="text-[18px] md:text-[24px] text-[#00204F] font-bold leading-[1.3] mb-2">
                                    {cond.title}
                                </h3>
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4] flex-grow">
                                    {cond.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}