"use client";

import SolarHealthBoldIcon from "@/components/icons/solar/health-bold";

interface VaccineItem {
  name: string;
  description: string;
}

interface CardOption {
  title: string;
  description: string;
  iconBgColor: string;
  vaccines: VaccineItem[];
}

const CARD_OPTIONS: CardOption[] = [
  {
    title: "Opsi 1 — Jadwal Vaksinasi Lengkap",
    description:
      "Melengkapi seluruh vaksin premarital untuk perlindungan kesehatan optimal sebelum pernikahan berlangsung.",
    iconBgColor: "bg-[#ff4dcf]",
    vaccines: [
      {
        name: "HPV (3 dosis)",
        description: "Perlindungan dari infeksi HPV penyebab kanker serviks",
      },
      {
        name: "Hepatitis B (3 dosis)",
        description: "Mencegah penularan penyakit hati kronis",
      },
      {
        name: "MMR (2 dosis)",
        description: "Melindungi dari campak, gondongan, dan rubella",
      },
      {
        name: "Tdap (1 dosis)",
        description: "Perlindungan terhadap risiko tetanus saat persalinan",
      },
    ],
  },
  {
    title: "Opsi 2 — Jadwal Tanpa Hepatitis B",
    description:
      "Untuk pengguna dengan vaksin Hepatitis B lengkap, melanjutkan vaksin premarital lainnya.",
    iconBgColor: "bg-[#aa43ff]",
    vaccines: [
      {
        name: "HPV (3 dosis)",
        description: "Membantu mencegah infeksi HPV sebelum menikah",
      },
      {
        name: "MMR (2 dosis)",
        description: "Perlindungan terhadap infeksi rubella sebelum kehamilan",
      },
      {
        name: "Tdap (1 dosis)",
        description: "Mencegah risiko tetanus bagi ibu dan bayi",
      },
    ],
  },
];

const ProgramVaksinasiPremaritalCardSection = () => {
  return (
    <section className="bg-background-custom px-[60px] py-4">
      <div className="max-w-7xl mx-auto">
        <div className="flex gap-6">
          {CARD_OPTIONS.map((option, index) => (
            <div
              key={index}
              className="flex-1 bg-white rounded-[12px] p-6 flex flex-col gap-6"
            >
              {/* Header */}
              <div className="flex flex-col gap-[5px]">
                <h3 className="font-semibold text-[20px] text-[#1a1a1a] leading-[1.2]">
                  {option.title}
                </h3>
                <p className="font-normal text-[18px] text-[#1a1a1a] leading-[1.2]">
                  {option.description}
                </p>
              </div>

              {/* Vaccine List */}
              <div className="flex flex-col gap-4">
                {option.vaccines.map((vaccine, vaccineIndex) => (
                  <div key={vaccineIndex} className="flex gap-3 items-start">
                    <div
                      className={`${option.iconBgColor} rounded-[4px] w-[29px] h-[26px] flex items-start justify-center pt-[3px] px-1 flex-shrink-0`}
                    >
                      <SolarHealthBoldIcon className="w-[21px] h-[21px] text-white" />
                    </div>
                    <div className="flex flex-col gap-[5px]">
                      <p className="font-semibold text-[20px] text-[#1a1a1a] leading-[1.2]">
                        {vaccine.name}
                      </p>
                      <p className="font-normal text-[18px] text-[#1a1a1a] leading-[1.2]">
                        {vaccine.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiPremaritalCardSection;