import RiHeartPulseFillIcon from "@/components/icons/ri/heart-pulse-fill";
import CodexChecklistIcon from "@/components/icons/codex/checklist";
import type { MCUContent } from "@/services/mcu.service";

interface ProgramMcuLayananSectionProps {
  serviceCards: MCUContent["serviceCards"];
  sectionTitle: string;
  sectionSubtitle: string;
}

const ProgramMcuLayananSection = ({
  serviceCards,
  sectionTitle,
  sectionSubtitle,
}: ProgramMcuLayananSectionProps) => {
  // Sort service cards by order
  const sortedCards = serviceCards ? [...serviceCards].sort((a, b) => a.order - b.order) : [];

  return (
    <section className="bg-linear-to-r from-[#5D8BFF] to-[#104CE4] py-10">
      <div className="max-w-7xl mx-auto flex flex-col gap-6">
        <div className="flex flex-col gap-4 px-6">
          <h2 className="text-white font-semibold text-4xl">
            {sectionTitle || "Jenis Layanan Medical Check Up"}
          </h2>
          <span className="text-white">
            {sectionSubtitle || "Beragam paket pemeriksaan kesehatan tersedia sesuai kebutuhan usia dan tujuan."}
          </span>
        </div>
        <div className="flex gap-2 overflow-hidden overflow-x-auto px-6 no-scrollbar">
          {sortedCards.map((item) => (
            <div
              key={item.id}
              className="p-6 rounded-lg bg-linear-to-b from-[#DCE7FF] to-white flex flex-col gap-6 min-w-70"
              style={{
                boxShadow: "0px 4px 4px 0px #8894FF9E",
              }}
            >
              <div className="rounded-full p-3 bg-[#7FA7FF] w-fit">
                <RiHeartPulseFillIcon className="size-6 text-white" />
              </div>
              <div className="flex flex-col gap-2.5">
                <span className="text-primary font-semibold">{item.title}</span>
                <span className="text-sm text-primary/50">
                  {item.description}
                </span>
              </div>
              <div className="flex flex-col gap-2">
                {item.items?.map((listItem, idx) => (
                  <div key={idx} className="flex gap-1">
                    <div>
                      <CodexChecklistIcon className="size-4 text-[#18FF59]" />
                    </div>
                    <span className="text-sm text-[#1F3D80]">{listItem}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProgramMcuLayananSection;