import Image from 'next/image';
import { AestheticSkinConcernProps } from '@/types/about-aesthetic';
import { getImageSrc } from '@/utils/image';

export default function AestheticSkinConcerns({ heading, monitor_cards }: AestheticSkinConcernProps) {
    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                <h2 className="text-[32px] md:text-[40px] font-medium leading-[1.2] mb-8 md:mb-14 max-w-[550px]">{heading}</h2>
                <div className="grid md:grid-cols-12 gap-6 md:gap-10">
                    {
                        monitor_cards?.map((cardItem, index) => {
                            const cardImgSrc = getImageSrc(cardItem.image);
                            return (
                                <div key={index} className="md:col-span-4">
                                    {cardImgSrc && (
                                        <figure className='mb-2'>
                                            <Image className='rounded-[16px]' src={cardImgSrc} width={400} height={240} alt="monitoring and prevention image" />
                                        </figure>
                                    )}
                                    <h5 className='text-[20px] md:text-[24px] text-[#00204F] font-bold mb-2'>{cardItem.title}</h5>
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        </section>
    )
}