"use client";

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


export default function LaserTechniquesOffer({ title, heading, what_we_offer_cards = [], className = "" }: LaserTechniquesOfferProps) {
    if (!heading && (!what_we_offer_cards || what_we_offer_cards.length === 0)) return null;

    return (
        <section className={` bg-[linear-gradient(180deg,_#FFF_0%,_#E9F1FF_100%)] ${className}`}>
            <div className="container">
                {/* Header Grid Section */}
                <div className=" text-center mb-10 md:mb-16">
                    <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-[48px] text-[#00204F] font-medium leading-[1.1] my-3">
                        {heading}
                    </h2>
                </div>

                {/* Cards Grid: 12-column system, 2 cards per row on desktop (col-span-6) */}
                <div className="grid grid-cols-12 gap-6 md:gap-10">
                    {what_we_offer_cards?.map((CardItem, index) => (
                        <div
                            key={index}
                            className="col-span-12 md:col-span-6 bg-white border border-[#E5E9ED] rounded-[16px] transition-all duration-300"
                        >
                            {/* Card Image Area with Floating Badge */}
                            <figure className="relative w-full  overflow-hidden shrink-0">
                                <Image
                                    src={CardItem.image}
                                    alt={"laser-image"}
                                    width={620}
                                    height={305}
                                    className="object-cover rounded-tl-[16px] rounded-tr-[16px]"
                                />
                                <span className="absolute top-4 right-4 bg-white text-[14px] text-[#1718FF] font-bold px-4 py-1 rounded-full ">
                                    {CardItem.tags}
                                </span>
                            </figure>

                            {/* Card Typography Area */}
                            <div className="p-6 md:p-8 flex flex-col flex-grow">
                                <h3 className="text-[20px] md:text-[24px] text-[#00204F] font-bold leading-[1.3] mb-2">
                                    {CardItem.heading}
                                </h3>
                                <p className="text-[14px] md:text-[18px] text-[#334D72] font-medium leading-[1.4]">
                                    {CardItem.description}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}