import _ from "lodash";

export default function SKPenghasilan({ data }: { data: any }) {
   const getValue = (jenis: string) =>
      _.upperFirst(
         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
      );

   return (
      <div style={{ lineHeight: "1.3" }}>
         {/* HEADER */}
         <div style={{ textAlign: "center", marginBottom: "10px" }}>
            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
            Alamat: {data.setting.desaAlamat}<br />
            Kode Pos: {data.setting.desaPos}
         </div>

         {/* JUDUL */}
         <div style={{ textAlign: "center", margin: "20px 0" }}>
            <b><u>SURAT KETERANGAN PENGHASILAN</u></b><br />
            Nomor: {data.surat.noSurat}
         </div>

         {/* YANG BERTANDA TANGAN */}
         <div style={{ marginTop: "15px" }}>
            Yang bertanda tangan di bawah ini:
            <table style={{ width: "100%", marginTop: "5px" }}>
               <tbody>
                  <tr>
                     <td style={{ width: "160px" }}>Nama</td>
                     <td style={{ width: "10px" }}>:</td>
                     <td>{data.setting.perbekelNama}</td>
                  </tr>
                  <tr>
                     <td>Jabatan</td>
                     <td>:</td>
                     <td>{data.setting.perbekelJabatan}</td>
                  </tr>
                  <tr>
                     <td>Kecamatan</td>
                     <td>:</td>
                     <td>{data.setting.desaKecamatan}</td>
                  </tr>
                  <tr>
                     <td>Kabupaten</td>
                     <td>:</td>
                     <td>{data.setting.desaKabupaten}</td>
                  </tr>
               </tbody>
            </table>
         </div>

         {/* IDENTITAS */}
         <div style={{ marginTop: "20px" }}>
            Dengan ini menerangkan bahwa:
            <table style={{ width: "100%", marginTop: "5px" }}>
               <tbody>
                  <tr><td style={{ width: "160px" }}>Nama</td><td>:</td><td>{getValue("nama")}</td></tr>
                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
                  <tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
               </tbody>
            </table>
         </div>

         {/* PENGHASILAN */}
         <div style={{ marginTop: "20px" }}>
            Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki penghasilan rata-rata:
            <table style={{ width: "100%", marginTop: "10px" }}>
               <tbody>
                  <tr>
                     <td style={{ width: "160px" }}>Penghasilan</td>
                     <td style={{ width: "10px" }}>:</td>
                     <td>
                        Rp {getValue("penghasilan")}
                        {" "}
                        ({getValue("penghasilan terbilang")}) per bulan
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>

         {/* KEPERLUAN */}
         <div style={{ marginTop: "20px" }}>
            Surat keterangan ini dibuat untuk keperluan: <b>{getValue("alasan permohonan")}</b>.
         </div>

         <div style={{ marginTop: "20px" }}>
            Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
         </div>

         {/* TANGGAL & TANDA TANGAN */}
         <div style={{ marginTop: "20px" }}>
            Dikeluarkan di {data.setting.desaNama} <br />
            Pada tanggal {data.surat.createdAt}
         </div>

         <div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end" }}>
            <div style={{ textAlign: "center" }}>
               Kepala Desa / Lurah {data.setting.desaNama}
               <br /><br /><br /><br />
               {data.setting.perbekelNama} <br />
               NIP. {data.setting.perbekelNIP}
            </div>
         </div>
      </div>
   );
}