"use client";

interface VaccinePremaritalRow {
  timing: string;
  scheduleType: string;
  vaccines: string;
}

const VACCINE_PREMARITAL_DATA: VaccinePremaritalRow[] = [
  {
    timing: "H-7 bulan",
    scheduleType: "Opsi 1 — Jadwal lengkap (HPV, Hepatitis B, MMR, Tdap)",
    vaccines: "HPV dosis 1, Hepatitis B dosis 1",
  },
  {
    timing: "H-6 / H-5 bulan",
    scheduleType: "Opsi 1 — Jadwal lengkap",
    vaccines: "HPV dosis 2, Hepatitis B dosis 2",
  },
  {
    timing: "H-4 bulan",
    scheduleType: "Opsi 1 — Jadwal lengkap",
    vaccines: "MMR dosis 1",
  },
  {
    timing: "H-3 bulan",
    scheduleType: "Opsi 1 — Jadwal lengkap",
    vaccines: "MMR dosis 2, Tdap",
  },
  {
    timing: "H-1 bulan",
    scheduleType: "Opsi 1 — Jadwal lengkap",
    vaccines: "HPV dosis 3, Hepatitis B dosis 3",
  },
  {
    timing: "H-7 bulan",
    scheduleType: "Opsi 2 — Tanpa Hepatitis B (sudah lengkap sebelumnya)",
    vaccines: "HPV dosis 1, MMR dosis 1",
  },
  {
    timing: "H-6 / H-5 bulan",
    scheduleType: "Opsi 2 — Tanpa Hepatitis B",
    vaccines: "HPV dosis 2, MMR dosis 2",
  },
  {
    timing: "H-1 bulan",
    scheduleType: "Opsi 2 — Tanpa Hepatitis B",
    vaccines: "HPV dosis 3, Tdap",
  },
];

const ProgramVaksinasiPremaritalTableSection = () => {
  return (
    <section className="bg-background-custom px-6 pb-12">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-[16px] p-6 lg:p-11 overflow-x-auto">
          <table className="w-full min-w-[1205px]">
            <thead>
              <tr>
                <th className="bg-[#ffac3e] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[397px]">
                  Waktu Sebelum Pernikahan
                </th>
                <th className="bg-[#ffac3e] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[400px]">
                  Jenis Jadwal
                </th>
                <th className="bg-[#ffac3e] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[400px]">
                  Vaksin yang Diberikan
                </th>
              </tr>
            </thead>
            <tbody>
              {VACCINE_PREMARITAL_DATA.map((row, index) => (
                <tr key={index}>
                  <td className="bg-[#ffebd1] border border-[#ff9b18] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.timing}
                  </td>
                  <td className="bg-[#ffebd1] border border-[#ff9b18] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.scheduleType}
                  </td>
                  <td className="bg-[#ffebd1] border border-[#ff9b18] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.vaccines}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiPremaritalTableSection;