import Image from 'next/image';
import BlueCtaLink from "@/ui/Button/BlueButton";
import { LaserSurgeryVisonProps } from "@/types/homepage";

export default function LayserSurgeryVision({ heading, description, cta, cta_link, image }: LaserSurgeryVisonProps) {
    return (
        <section >
            <div className="container">
                <div className="bg-white rounded-[16px] overflow-hidden shadow-[0_4px_40px_0_rgba(0,0,0,0.08)]">
                    <div className="grid grid-cols-12">
                        <div className="col-span-12 md:col-span-6 order-2 md:order-1 p-5 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center">
                            <div className="max-w-[450px]">
                                <h2 className="text-[28px] sm:text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-3">{heading}</h2>
                                <p className="text-[16px] md:text-[18px] xl:text-[20px] text-[#334D72] font-normal mb-8 md:mb-12">{description}</p>
                                {
                                    cta_link && (
                                        <BlueCtaLink href={cta_link} children={cta} />
                                    )
                                }
                            </div>
                        </div>
                        <div className="col-span-12 md:col-span-6 order-1 md:order-2">
                            {image && (
                                <Image className="w-full h-[240px] md:h-full object-cover" src={image} width={630} height={380} alt="surgery vision" />
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}