"use client";

import Image from 'next/image';
import BannerImg from '../../../../public/images/about-banner.png';
// import WhiteArrow from "../../../../public/images/white-arrow.svg";
import BlueCtaLink from '@/ui/Button/BlueButton';
import { ClinicBannerProps } from '@/types/clinics-and-doctors';
import BlueBorderLink from '@/ui/Button/BlueBorderButton';

export default function ClinicBanner({ heading, description, image, cta, location, location_link }: ClinicBannerProps) {
    const handleScrollToClinics = (e: React.MouseEvent<HTMLAnchorElement>) => {
        e.preventDefault();
        const element = document.getElementById("viewClinics");
        if (element) {
            element.scrollIntoView({ behavior: "smooth" });
        }
    };

    const handleScrollToDoctors = (e: React.MouseEvent<HTMLAnchorElement>) => {
        e.preventDefault();
        const element = document.getElementById("ourDoctors");
        if (element) {
            element.scrollIntoView({ behavior: "smooth" });
        }
    };

    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-[400px] 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>
                        <div className="xl:flex gap-4">
                            <div>
                                <BlueCtaLink href="#viewClinics" onClick={handleScrollToClinics} className='w-full justify-center mb-4 xl:mb-0 xl:w-auto'>{cta}</BlueCtaLink>
                            </div>

                            <div>
                                <BlueBorderLink href="#ourDoctors" onClick={handleScrollToDoctors} className='w-full justify-center xl:w-auto'>{location}</BlueBorderLink>
                            </div>
                        </div>
                    </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>
    )
}