import Image from 'next/image';
import { getImageSrc } from '@/utils/image';

export interface AestheticSupportCardArr {
    image?: string;
    tag?: string;
    title?: string;
    description?: string;
}

export interface AestheticSupportProps {
    title?: string;
    heading?: string;
    description?: string;
    cards_content?: AestheticSupportCardArr[];
}

export default function AestheticSupport({ title, heading, description, cards_content }: AestheticSupportProps) {
    return (
        <section className="mb-16 md:mb-30 overflow-hidden">
            <div className="container">
                <div className="mb-8 md:mb-10">
                    <span className="text-[12px] md:text-[14px] font-normal text-[#334D72] md:text-center block tracking-[0.5px] uppercase mb-2">{title}</span>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.1] max-w-[740px] mx-auto md:text-center mb-4">{heading}</h2>
                    <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] max-w-[560px] mx-auto md:text-center">{description}</p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-10">
                    <div className="md:col-span-12 -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-5 px-5 md:px-0 snap-x snap-mandatory">
                            {
                                cards_content?.map((cardItem, index) => {
                                    const cardImgSrc = getImageSrc(cardItem.image);
                                    return (
                                        <div key={index} className={`bg-[#F2F4F6] 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`}>
                                            {cardImgSrc && (
                                                <figure className='w-16 h-16 md:w-18 md:h-18 bg-[#fff] rounded-[40px] flex items-center justify-center mb-8 md:mb-12'>
                                                    <Image src={cardImgSrc} width={40} height={40} alt="image" />
                                                </figure>
                                            )}
                                            <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>
    )
}