import Image from 'next/image';
import BannerImg from '../../../../public/images/about-banner.png';
import WhiteArrow from "../../../../public/images/white-arrow.svg";
import { AboutUsBannerProps } from '@/types/about-us';
import BookAnAppointmentModal from '@/components/CommonComponent/BookAppointmentModal';

export default function AboutUsBanner({ heading, description, image, cta }: AboutUsBannerProps) {
    return (
        <section className="mt-3 md:mt-8 mb-8 md:mb-20">
            <div className="container">
                <div className="grid grid-cols-12 gap-6 items-center">
                    <div className="col-span-12 md:col-span-6">
                        <h1 className={`text-[32px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] max-w-[500px] mb-4 md:mb-6`}>
                            {heading}
                        </h1>
                        <figure className='md:hidden'>
                            <Image src={image || BannerImg} width={335} height={300} alt="Where Precision Medicine Meets Patient-Centered Care" className="w-full h-auto mb-3 rounded-[16px] md:rounded-[16px] object-cover" priority />
                        </figure>
                        <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal mb-8 md:mb-12 max-w-[500px]">{description}</p>
                        {/* <BlueCtaLink href={cta_link} children={cta} /> */}
                        <BookAnAppointmentModal
                            buttonBgClass="bg-[#1718FF]"
                            buttonTextClass="text-white w-full md:w-auto"
                            className="text-[#1718FF]"
                            buttonText={cta}
                            arrowIcon={WhiteArrow}
                        />
                    </div>
                    <div className="col-span-12 md:col-span-6">
                        <figure className='hidden md:block'>
                            <Image src={image || BannerImg} width={630} height={460} alt="Where Precision Medicine Meets Patient-Centered Care" className="w-full h-auto rounded-[16px] md:rounded-[16px]" priority />
                        </figure>
                    </div>
                </div>
            </div>
        </section>
    )
}