import React from "react";

export interface GeneralWhyChooseoCulsuProps {
    title: string;
    heading: string;
    description?: string;
    cards_content?: {
        title: string;
        description: string;
    }[];
    className?: string;
}

export default function GeneralWhyChooseoCulsu({
    title,
    heading,
    description,
    cards_content,
    className,
}: GeneralWhyChooseoCulsuProps) {
    return (
        <section className={`py-16 md:py-20 xl:py-30 mb-16 md:mb-20 xl:mb-30 bg-[#F2F4F6] overflow-hidden ${className || ""}`}>
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Header */}
                <div className="text-center max-w-[800px] mx-auto mb-10 md:mb-14">
                    {title && (
                        <span className="text-[12px] md:text-[14px] font-semibold text-[#334D72] tracking-[1.5px] uppercase block mb-3">
                            {title?.trim() || ""}
                        </span>
                    )}
                    {heading && (
                        <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-tight">
                            {heading}
                        </h2>
                    )}
                    {description && (
                        <p className="text-[16px] md:text-[18px] text-[#334D72] font-normal leading-relaxed mt-4">
                            {description}
                        </p>
                    )}
                </div>

                {/* 12-Column Responsive CSS Grid */}
                <div className="grid grid-cols-12 gap-6">
                    {cards_content?.map((card, index) => (
                        <div
                            key={index}
                            className="col-span-12 sm:col-span-6 md:col-span-2 xl:col-span-3 bg-white rounded-[16px] p-6 md:p-8 flex flex-col justify-start transition-all duration-300 hover:shadow-md border border-[#E5E9ED]/50"
                        >
                            <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold leading-[1.3] mb-3">
                                {card.title}
                            </h3>
                            <p className="text-[14px] md:text-[15px] text-[#334D72] font-normal leading-relaxed">
                                {card.description}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}