import Image from 'next/image';
import { KeyStrengthProps } from '@/types/homepage';

export default function KeyStrength({ title, heading, description, cards_content, cardBgClass = "bg-white", }: KeyStrengthProps) {
    return (
        <section className="mb-16 md:mb-30 overflow-hidden">
            <div className="container">
                <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-10">
                    <div className="md:col-span-4">
                        {
                            title &&
                            <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] tracking-[0.5px] uppercase">{title}</span>
                        }
                        <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.1] my-3">{heading}</h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3]">{description}</p>
                    </div>
                    <div className="md:col-span-8 -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-3 gap-4 md:gap-5 px-5 md:px-0 snap-x snap-mandatory">
                            {
                                cards_content?.map((cardItem, index) =>
                                    <div key={index} className={`${cardBgClass} rounded-[16px] p-5 md:p-6 w-[calc(75vw-20px)] max-w-[260px] md:w-auto md:max-w-none shrink-0 snap-start`}>
                                        {cardItem.image && (
                                            <Image src={cardItem.image} width={72} height={72} alt={cardItem.title} className='mb-6 md:mb-12' />
                                        )}
                                        <h3 className='text-[18px] md:text-[20px] text-[#00204F] font-bold md:leading-[1.3] leading-[1.4] mb-2'>{cardItem.title}</h3>
                                        <p className='text-[14px] md:text-[16px] text-[#334D72] font-normal'>{cardItem.description}</p>
                                    </div>
                                )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}