"use client";

import Image from "next/image";
import BlueCtaLink from "@/ui/Button/BlueButton";
import { HomepageBannerProps } from "@/types/homepage";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import DarkBlueArrow from '../../../../public/images/dark-blue-arrow.svg';

export default function Banner({ banner_image, banner__mob_image, heading, description, partner_text, service_text, appointment_text, appointment_link, icons }: HomepageBannerProps) {
    const formattedPartnerText = partner_text
        ? partner_text
            .replace(/Trusted by\s+/i, "Trusted by\n")
            .replace(/milliers de\s+/i, "milliers de\n")
        : partner_text;

    return (
        <>
            <section>
                <div className="relative z-0">
                    <div className="md:block hidden">
                        <figure className="relative after:content-[''] after:absolute after:top-0 after:left-0 after:right-0 after:w-full after:h-full after:bg-[linear-gradient(71deg,_rgba(0,32,79,0.64)_43.76%,_rgba(0,73,181,0)_66.89%)]">
                            {banner_image && (
                                <Image className="w-full min-h-[500px] lg:min-h-0 object-cover" src={banner_image} width={1440} height={763} alt="Banner Image" priority fetchPriority="high" sizes="(min-width: 768px) 100vw, 1px" style={{ width: '100%', height: 'auto' }} />
                            )}
                        </figure>
                    </div>
                    <div className="md:hidden block">
                        <figure className="relative after:content-[''] after:absolute after:top-0 after:left-0 after:right-0 after:w-full after:h-full after:bg-[linear-gradient(48deg,_rgba(0,32,79,0.64)_50.2%,_rgba(0,73,181,0)_72.98%)]">
                            {banner__mob_image && (
                                <Image className="w-full min-h-[560px] object-cover" src={banner__mob_image} width={390} height={640} alt="Banner Image" priority fetchPriority="high" sizes="(max-width: 767px) 100vw, 1px" style={{ width: '100%', height: 'auto' }} />
                            )}
                        </figure>
                    </div>

                    <div className="absolute inset-0 z-[1]">
                        <div className="w-full max-w-[1280px] mx-auto px-5 h-full flex flex-col justify-between items-start pt-24 md:pt-[60px] xl:pt-30 pb-10">
                            <div className="max-w-[630px]">
                                <h1 className="text-[24px] md:text-[36px] xl:text-[48px] text-white font-medium leading-[1.2] mb-4 md:mb-6">
                                    {heading}
                                </h1>
                                <p className="text-[16px] md:text-[16px] xl:text-[20px] text-white !font-normal mb-6 md:mb-8 xl:mb-12">
                                    {description}
                                </p>

                                <div className="flex flex-col sm:flex-row gap-3">

                                    {/* <WhiteBgLink href={appointment_link || "#"} className="w-full justify-center sm:w-auto">{appointment_text}</WhiteBgLink> */}
                                    <BookAnAppointmentModal
                                        buttonText={appointment_text}
                                        buttonBgClass="bg-white justify-center"
                                        buttonTextClass="text-[#00204F]"
                                        arrowIcon={DarkBlueArrow}
                                    />
                                    <div
                                        onClick={() =>
                                            document.getElementById("services")?.scrollIntoView({
                                                behavior: "smooth",
                                            })
                                        }
                                    >
                                        <BlueCtaLink href={"/"} className="w-full justify-center sm:w-auto">{service_text}</BlueCtaLink>
                                    </div>
                                </div>
                            </div>

                            <div className="flex items-center mt-6 md:mt-0">
                                <div className="flex">
                                    {icons?.map((icon, index) => (
                                        <figure
                                            key={index}
                                            className={`${index !== 0 ? "-ml-3" : ""} relative`}
                                        >
                                            {icon.images && (
                                                <Image
                                                    src={icon.images}
                                                    width={48}
                                                    height={48}
                                                    alt="Trusted patients"
                                                    className="rounded-full"
                                                />
                                            )}
                                        </figure>
                                    ))}
                                </div>

                                <p className="text-white font-normal ml-4 text-[14px] md:text-[15px] leading-[1.3] whitespace-pre-line">
                                    {formattedPartnerText}
                                </p>
                            </div>
                            {/* <div className="flex gap-3 items-center mt-6 md:mt-0">
                                {
                                    icons?.map((icon, index) => (
                                        <figure key={index}>
                                            <Image src={icon.images} width={48} height={48} alt="Trusted patients" />
                                        </figure>
                                    ))
                                }
                                <p className="text-white font-normal w-full max-w-[110px]">{partner_text}</p>
                            </div> */}
                        </div>
                    </div>
                </div>

            </section>
        </>
    )
}