"use client";

import Image from "next/image";
import { ConsultationProps } from "@/types/laser-vision";
import WhiteArrow from '../../../../public/images/white-arrow.svg';
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";


export default function Consultation({ heading, description, image, cta, className }: ConsultationProps) {
    return (
        <section className={`${className}`}>
            <div className="container">
                <div className="relative w-full max-w-[1064px] mx-auto overflow-hidden bg-[#E8F1FF] rounded-[24px] flex flex-col md:flex-row items-stretch ">
                    {/* Left content area (Desktop), Bottom content area (Mobile) */}
                    <div className="order-2 md:order-1 w-full md:w-[55%] p-6 md:p-12 lg:p-16 flex flex-col justify-center text-center md:text-left z-10">
                        <h2 className="text-[24px] md:text-[32px] xl:text-[32px] text-[#00204F] font-bold leading-[1.2] mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] mb-11 max-w-[480px]">
                            {description}
                        </p>
                        <div className="flex justify-center md:justify-start">
                            <BookAnAppointmentModal
                                buttonBgClass="bg-[#1718FF]"
                                buttonTextClass="text-[#fff]"
                                buttonText={cta}
                                arrowIcon={WhiteArrow}
                            />
                        </div>
                    </div>

                    {/* Right image area (Desktop), Top image area (Mobile) */}
                    <div className="order-1 md:order-2 w-full md:w-[45%] h-[240px] md:h-auto relative shrink-0">
                        <Image
                            src={image}
                            alt="Got questions about your consultation?"
                            fill
                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 45vw, 480px"
                            className="object-cover"
                            priority
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}