"use client";

interface VaccineDewasaRow {
  vaccine: string;
  target: string;
  schedule: string;
}

const VACCINE_DEWASA_DATA: VaccineDewasaRow[] = [
  {
    vaccine: "HPV9",
    target: "Wanita dewasa",
    schedule: "3 dosis (bulan 0, 2, 6)",
  },
  {
    vaccine: "Influenza (Flu)",
    target: "Pria & Wanita",
    schedule: "1 dosis setiap tahun",
  },
  {
    vaccine: "Pneumonia (PCV20)",
    target: "Pria & Wanita",
    schedule: "1 dosis",
  },
  {
    vaccine: "Demam Berdarah",
    target: "Pria & Wanita",
    schedule: "2 dosis dengan jarak 3 bulan",
  },
  {
    vaccine: "Zoster / Shingrix",
    target: "Lansia",
    schedule: "2 dosis dengan jarak 3 bulan",
  },
  {
    vaccine: "Tifoid",
    target: "Pria & Wanita",
    schedule: "1 dosis tiap 3 tahun",
  },
  { vaccine: "MMR", target: "Pria & Wanita", schedule: "2 dosis" },
  { vaccine: "Hepatitis A", target: "Pria & Wanita", schedule: "2 dosis" },
  {
    vaccine: "Hepatitis B",
    target: "Pria & Wanita",
    schedule: "3 dosis (0-1-6 bulan)",
  },
  { vaccine: "Varicella", target: "Pria & Wanita", schedule: "2 dosis" },
  {
    vaccine: "Tetanus (Tdap)",
    target: "Wanita Hamil",
    schedule: "1 dosis tiap kehamilan",
  },
];

const ProgramVaksinasiDewasaTableSection = () => {
  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-[#5f91ff] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[397px]">
                  Jenis Vaksin
                </th>
                <th className="bg-[#5f91ff] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[400px]">
                  Sasaran
                </th>
                <th className="bg-[#5f91ff] text-white font-semibold text-[24px] text-center py-5 px-4 rounded-[8px] w-[400px]">
                  Jadwal Pemberian
                </th>
              </tr>
            </thead>
            <tbody>
              {VACCINE_DEWASA_DATA.map((row, index) => (
                <tr key={index}>
                  <td className="bg-[#d9e4ff] border border-[#3f7bff] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.vaccine}
                  </td>
                  <td className="bg-[#d9e4ff] border border-[#3f7bff] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.target}
                  </td>
                  <td className="bg-[#d9e4ff] border border-[#3f7bff] text-[#1a1a1a] font-normal text-[24px] text-center py-5 px-4">
                    {row.schedule}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiDewasaTableSection;