import React from "react";
import "./index.css";

/**
 * A component representing a contract template.
 * @interface
 * @param {Object} props - The component props.
 * @param {Object} props.data - The contract data.
 * @param {number} props.kitta - The kitta value.
 * @param {string} props.target_name - The target name.
 * @param {React.RefObject} props.componentRef - A React ref for the component.
 * @returns {React.ReactElement} - The rendered component.
 */
const ContractTemplate = ({ data, kitta, target_name, componentRef }) => {
  const currentDate = new Date();
  const localDate = currentDate.toLocaleString().split(",")[0];
  return (
    <div
      className="contract_container"
      id="share_contract_wrapper"
      ref={componentRef}
    >
      <p style={{ textAlign: "right", fontSize: 15 }}>मिति:{localDate || ""}</p>
      <p style={{ fontSize: 15, marginTop: "4rem" }}>श्री अध्यक्षज्यू,</p>
      <p style={{ fontSize: 15 }}>श्री लेखा सुपरीवेक्षकज्यू ,</p>
      <p style={{ fontSize: 15 }}>{data?.share_company}, पोखरा ।</p>
      <h4 style={{ textAlign: "center", fontSize: 15 }}>
        <u>विषय शेयर स्थानान्तरण गराई पाँउ ।</u>
      </h4>
      <p style={{ fontSize: 15 }}>महोदय,</p>
      <p style={{ fontSize: 15 }}>
        प्रस्तुत विषयमा मेरो नाउमा रहेको आरकेडि होल्डीङ्गस् लिमिटेडको शेयरको
        बोनसबाट थपिन आएको मध्येको शेयर तपसिल बमोजीमका व्यक्तिका नाउमा
        स्थानान्तरण गरिदिनु हुन सादर अनुरोध गर्दछु । शेयर स्थानान्तरण हुने मिति
        सहित निवेदनमा खुलाएकोछ सोहि अनुसारको व्यवस्थापन मिलाई दिनु हुन अनुरोध छ
        ।
      </p>
      <div className="share_details flex justify-center mt-5">
        <table
          style={{
            width: "90%",
            fontSize: 15,
            borderCollapse: "collapse",
            border: "1px solid black",
          }}
        >
          <tbody>
            <tr>
              <th
                className="sm"
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                नं
              </th>
              <th
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                स्थानान्तरण हुनेको नामथर
              </th>
              <th
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                लागुहुने मिति
              </th>
              <th
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                शेयर रकम
              </th>
              <th
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                कित्ता
              </th>
              <th
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                कैफियत
              </th>
            </tr>
            <tr>
              <td
                className="sm"
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                १
              </td>
              <td
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                {target_name || ""}
              </td>
              <td
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                {localDate}
              </td>
              <td
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                {(data?.share_details?.total_amount /
                  data?.share_details?.total_kitta) *
                  kitta || ""}
              </td>
              <td
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                {kitta || ""}
              </td>
              <td
                style={{
                  border: "1px solid black",
                  padding: 8,
                  textAlign: "left",
                }}
              >
                {""}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <br />
      <br />
      <h4 style={{ fontSize: 15, marginLeft: "30rem" }}>
        .......................
      </h4>
      <p style={{ fontSize: 15, marginLeft: "32rem" }}>निवेदक</p>
      <p style={{ fontSize: 15, marginLeft: "32rem" }}>
        नाम: {data?.name || " "}
      </p>
      <p style={{ fontSize: 15, marginLeft: "32rem" }}> ना प्रा न:</p>
      <p style={{ fontSize: 15, marginLeft: "32rem" }}>
        शेयर सदस्यता नं {data?.id || "......"} आरकेडी ।
      </p>
    </div>
  );
};

export default ContractTemplate;