import Image from "next/image";
import type { MCUContent } from "@/services/mcu.service";

interface ProgramMcuFlowSectionProps {
  steps: MCUContent["steps"];
  sectionTitle: string;
  sectionSubtitle: string;
  flowImageUrl?: string;
}

const ProgramMcuFlowSection = ({
  steps,
  sectionTitle,
  sectionSubtitle,
  flowImageUrl,
}: ProgramMcuFlowSectionProps) => {
  // Sort steps by order
  const sortedSteps = steps ? [...steps].sort((a, b) => a.order - b.order) : [];

  return (
    <section className="bg-background-custom py-8">
      <div className="max-w-7xl mx-auto flex flex-row items-center justify-between">
        <div
          className="aspect-4/5 relative w-140 h-full rounded-4xl overflow-hidden border-2 border-white"
          style={{
            boxShadow: "0px 4px 4px 0px #00000040",
          }}
        >
          <Image
            src={flowImageUrl || "/assets/program/advantage.jpg"}
            alt="MCU Flow"
            fill
            className="object-cover"
          />

          <div className="absolute inset-0 bg-linear-to-b from-[#BACDF729] to-[#79A3FF]" />
        </div>

        <div className="flex flex-col gap-6 items-end max-w-160 justify-end text-end">
          <div className="flex flex-col">
            <h2 className="text-text-sub font-semibold text-[44px] leading-none">
              {sectionTitle || "Cara melakukan MCU di Klinik Adera"}
            </h2>
            <h4 className="text-[#383636CC] text-[24px] font-medium">
              {sectionSubtitle || "Pemesanan home care mudah, cepat, bisa online atau langsung hubungi admin klinik."}
            </h4>
          </div>

          <div
            className="px-7 bg-white w-full rounded-2xl"
            style={{ boxShadow: "0px 4px 4px 0px #00000025" }}
          >
            <div className="flex flex-col">
              {sortedSteps.map((item, index) => (
                <div
                  key={item.id}
                  className="flex flex-row items-center gap-6 justify-end"
                >
                  <div className="flex-1 text-right max-w-sm">
                    <h3 className="text-xl font-bold text-text-sub">
                      {item.title}
                    </h3>
                    <p className="text-sm text-[#383636CC]">
                      {item.description}
                    </p>
                  </div>

                  <div className="relative flex flex-col items-center">
                    {index !== 0 && <div className="w-0.75 h-8 bg-[#5EB9FF]" />}
                    {index === 0 && <div className="h-8" />}

                    <div className="z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#0755FF] text-white font-bold text-lg">
                      {index + 1}
                    </div>

                    {index !== sortedSteps.length - 1 && <div className="w-0.75 h-8 bg-[#5EB9FF]" />}
                    {index === sortedSteps.length - 1 && <div className="h-8" />}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProgramMcuFlowSection;