"use client";

interface ProgramVaksinasiPremaritalHeaderSectionProps {
  onDownload?: () => void;
}

const ProgramVaksinasiPremaritalHeaderSection = ({
  onDownload,
}: ProgramVaksinasiPremaritalHeaderSectionProps) => {
  return (
    <section className="bg-background-custom px-[70px] py-2">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-start justify-between gap-8">
          <div className="flex flex-col gap-2">
            <h1 className="font-semibold text-[28px] text-[#1a1a1a]">
              Jadwal Vaksinasi Premarital
            </h1>
            <p className="font-normal text-[24px] text-[#8c8c8c] max-w-[885px]">
              Lihat panduan jadwal vaccinations premarital untuk membantu
              mempersiapkan kesehatan sebelum pernikahan sesuai rekomendasi
              medis.
            </p>
          </div>

          <button
            type="button"
            onClick={onDownload}
            className="flex flex-col items-center gap-1 hover:opacity-80 transition-opacity"
            aria-label="Download jadwal"
          >
            <svg
              width="47"
              height="47"
              viewBox="0 0 47 47"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M23.5 42C32.6127 42 40 34.6127 40 25.5C40 16.3873 32.6127 9 23.5 9C14.3873 9 7 16.3873 7 25.5C7 34.6127 14.3873 42 23.5 42Z"
                stroke="#003dd8"
                strokeWidth="2"
              />
              <path
                d="M23.5 18V32M23.5 32L16.5 25M23.5 32L30.5 25"
                stroke="#003dd8"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <span className="font-medium text-[20px] text-[#003dd8] underline">
              Download Jadwal
            </span>
          </button>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiPremaritalHeaderSection;