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

interface ProgramMcuAdvantageSectionProps {
  advantages: MCUContent["advantages"];
  sectionTitle: string;
  sectionSubtitle: string;
  primaryImageUrl?: string;
  secondaryImageUrl?: string;
  statValue?: string;
  statLabel?: string;
}

const ProgramMcuAdvantageSection = ({
  advantages,
  sectionTitle,
  sectionSubtitle,
  primaryImageUrl,
  secondaryImageUrl,
  statValue,
  statLabel,
}: ProgramMcuAdvantageSectionProps) => {
  // Sort advantages by order
  const sortedAdvantages = advantages ? [...advantages].sort((a, b) => a.order - b.order) : [];

  return (
    <section className="bg-background-custom py-8">
      <div className="max-w-7xl mx-auto flex flex-col gap-8">
        <div className="flex flex-col gap-3 px-6">
          <h2 className="text-text-sub font-semibold text-4xl">
            {sectionTitle || "Kenapa Medical Check Up di Klinik Adera"}
          </h2>
          <span className="text-[#1A1A1A] text-lg">
            {sectionSubtitle || "Pelayanan pemeriksaan kesehatan lengkap dengan proses cepat, akurat, dan terpercaya."}
          </span>
        </div>
        <div className="flex justify-between w-full">
          <div className="flex flex-col gap-2 max-w-125">
            {sortedAdvantages.map((item) => (
              <div key={item.id} className="flex gap-4">
                <div>
                  <div
                    className="size-4 rounded-full"
                    style={{ backgroundColor: item.color || "#5F91FF" }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className="text-[#404040] font-medium leading-none text-[24px]">
                    {item.title}
                  </span>
                  <span className="text-[#404040] text-sm leading-tight text-[20px]">
                    {item.description}
                  </span>
                </div>
              </div>
            ))}
          </div>

          <div className="relative flex gap-3">
            <div className="aspect-4/5 relative w-88.5 h-128 rounded-4xl overflow-hidden">
              <Image
                src={primaryImageUrl || "/assets/program/advantage.jpg"}
                alt="Advantage"
                fill
                className="object-cover"
              />
            </div>
            <div className="aspect-4/5 relative w-88.5 h-128 rounded-4xl overflow-hidden">
              <Image
                src={secondaryImageUrl || "/assets/program/advantage.jpg"}
                alt="Advantage"
                fill
                className="object-cover"
              />
            </div>

            <div className="absolute inset-0 z-10 flex items-center justify-center">
              <div
                className="flex flex-col p-3 gap-1 rounded-xl bg-linear-to-r from-[#3F7BFF] to-[#000CF8] items-center justify-center h-fit w-59"
                style={{
                  boxShadow: "0px 4px 4px 0px #00000040",
                }}
              >
                <span className="text-[54px] font-bold text-white leading-none">
                  {statValue || "342"} <span className="font-medium text-[20px]">Pasien</span>
                </span>
                <span className="text-sm font-medium text-white leading-none">
                  {statLabel || "Pemberian layanan dirumah"}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProgramMcuAdvantageSection;