"use client";

import Image from "next/image";
import WhiteCtaLink from "@/ui/Button/WhiteButton";
import { ClinicShowcaseProps } from "@/types/homepage";
import DefaultClinicImage from "../../../../public/images/request-cost.png";

export default function ClinicShowcase(props: ClinicShowcaseProps & { cta?: string }) {
  const { image, heading, description, number, cta_link, cta_text, cta } = props;
  const buttonText = cta_text || cta;

  if (!heading && !description) {
    return null;
  }

  const displayImage = image && image.trim() !== "" ? image : DefaultClinicImage;

  return (
    <section className="bg-[#02102E] py-16 md:py-30 mb-16 md:mb-30">
      <div className="container">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">

          {/* Left Column: Handles layout flow for both desktop and mobile viewports */}
          <div className="lg:col-span-6 flex flex-col justify-center">
            <h2 className="text-[32px] md:text-[44px] xl:text-[48px] font-medium text-white leading-[1.2] tracking-tight mb-4 lg:mb-4 max-w-[522px]">
              {heading}
            </h2>

            {/* Mobile/Tablet Image - visible on mobile/tablet viewports, hidden on desktop */}
            <div className="block lg:hidden relative w-full h-[240px] sm:h-[340px] md:h-[400px] mb-8">
              <Image
                src={displayImage}
                alt="State of the art laser surgery room"
                fill
                sizes="(max-width: 1024px) 100vw, 1px"
                className="object-cover w-full h-full rounded-[24px]"
                priority={Boolean(image && image.trim() !== "")}
              />
            </div>

            {/* Description Paragraph */}
            <p className="text-[16px] md:text-[20px] text-[#E5E9ED] font-normal leading-[1.4] mb-8 max-w-[570px]">
              {description}
            </p>

            {/* Interactive Stats Panel */}
            {
              number &&
              <div className="grid grid-cols-2 gap-8 mb-8">
                {
                  number?.map((item, index) => (
                    <div key={index}>
                      <span className="text-[56px] md:text-[64px] text-[#00D9E5] font-medium leading-none block mb-2">
                        {item.count}
                      </span>
                      <span className="text-[15px] md:text-[18px] text-white font-medium">
                        {item.content}
                      </span>
                    </div>
                  ))
                }
              </div>
            }

            {/* Subtle Divider Rule */}
            <div className="border-t border-[#4D6384] w-full mb-8"></div>

            {/* Action CTA Button */}
            {buttonText && (
              <div>
                <WhiteCtaLink href={cta_link || "#"} className="w-full sm:w-auto justify-center">
                  {buttonText}
                </WhiteCtaLink>
              </div>
            )}
          </div>

          {/* Right Column: Desktop Image - visible on desktop viewports, hidden on mobile */}
          <div className="hidden lg:block lg:col-span-6">
            <figure className="relative after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:w-full after:h-full after:rounded-[16px] after:bg-[linear-gradient(224deg,rgba(11,61,136,0)_57.23%,#0B3D88_99.07%)]">
              <Image
                src={displayImage}
                width={630}
                height={537}
                alt="stateof laser surgery clinic"
                className=" w-full h-auto rounded-[16px]"
                priority={Boolean(image && image.trim() !== "")}
              />
            </figure>
          </div>

        </div>
      </div>
    </section>
  );
}