import Image from "next/image";
import { TreatmentProcedureProps } from "@/types/cataract";
import BookAnAppointmentModal from "../BookAppointmentModal";
import BlueArrow from "../../../../public/images/blue-arrow.svg";

export default function TreatmentJourney({ title, heading, description, cta_text, surgery_steps = [], className = "", showCTA }: TreatmentProcedureProps) {
    if (!heading && (!surgery_steps || surgery_steps.length === 0)) return null;

    // Check if any step has a duration or icon to dynamically fit grid columns
    const hasDuration = surgery_steps.some((step) => Boolean(step?.duration || step?.icon));
    const descColSpan = hasDuration ? "md:col-span-5" : "md:col-span-7";
    // const wrapperMaxWidth = hasDuration ? "max-w-[1280px]" : "max-w-[1140px]";
    const wrapperMaxWidth = "max-w-[1240px]";

    return (
        <section className={`${className}`}>
            <div className="container">
                {/* Header Block */}
                <div className="md:text-center max-w-[846px] mx-auto mb-8 md:mb-14">
                    <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] uppercase tracking-[0.5px] mb-2 md:mb-3 block">
                        {title}
                    </span>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] mb-2 md:mb-4">
                        {heading}
                    </h2>
                    <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-[1.4] max-w-[650px] mx-auto">
                        {description}
                    </p>
                </div>

                {/* Steps List */}
                <div className={`${wrapperMaxWidth} mx-auto`}>
                    {surgery_steps.map((surgeryItem, index) => (
                        <div
                            key={index}
                            className="grid grid-cols-12 gap-y-4 md:gap-y-0 py-6 md:py-8 items-center border-b border-[#E5E9ED]"
                        >
                            {/* Step Number */}
                            <div className="col-span-12 md:col-span-1">
                                <span className="text-[28px] md:text-[40px] font-medium text-[#1718FF] leading-none">
                                    {surgeryItem.Number}
                                </span>
                            </div>

                            {/* Step Title */}
                            <div className="col-span-12 md:col-span-4 pr-0 md:pr-4">
                                <h3 className="text-[20px] md:text-[24px] font-bold text-[#00204F]">
                                    {surgeryItem.title}
                                </h3>
                            </div>

                            {/* Step Description */}
                            <div className={`col-span-12 ${descColSpan} pr-0 md:pr-4`}>
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-[1.4]">
                                    {surgeryItem.description}
                                </p>
                            </div>

                            {/* Step Duration (Only rendered if duration data exists) */}
                            {hasDuration && (
                                <div className="col-span-12 md:col-span-2">
                                    <div className="flex items-center gap-2 md:justify-end text-[#1718FF]">
                                        {surgeryItem?.icon && (
                                            <Image
                                                src={surgeryItem.icon}
                                                width={18}
                                                height={18}
                                                alt="clock"
                                                className="w-[18px] h-[18px] shrink-0"
                                            />
                                        )}
                                        <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px]">
                                            {surgeryItem.duration}
                                        </span>
                                    </div>
                                </div>
                            )}
                        </div>
                    ))}
                </div>

                {/* Bottom CTA Button */}
                {
                    showCTA && (
                        <div className="flex justify-center mt-6 md:mt-16">
                            <BookAnAppointmentModal
                                buttonBgClass="bg-[#fff] border border-[#1718FF]"
                                buttonTextClass="text-[#1718ff]"
                                buttonText={cta_text}
                                arrowIcon={BlueArrow}
                            />
                        </div>
                    )

                }

            </div>
        </section>
    );
}