import React from "react";
import { InputCompOne } from "..";

const LoanAmountComp: React.FC = () => {
  return (
    <>
      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
          Loan Amount
        </h1>
        <div className="flex flex-col gap-[.4375rem]">
          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
            For more enquiries and support
          </p>
          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Call: 09099000000
          </p>
          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Email: fcmbloan@support.com
          </p>
        </div>
      </div>
      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem]">
        <InputCompOne
          parentClass="max-w-[471px] w-full"
          label="Your Monthly Salary*"
          name="salary"
          parentInputClass="w-full"
          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
          input
          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
          placeholder="150,000"
        />

        <div className="w-full border-[3px] rounded-xl border-black min-h-[55.25rem] py-4 px-8 max-w-[49rem]">
          <p className="leading-[1.375rem] tracking-[3%] text-[#5C2684] w-[45.5625rem] mb-[42px]">
            The maximum amount you can apply for on this offer is based on the
            information you shared with us in your loan application. We have
            made this offer to suit your monthly remuneration and to enable you
            pay your loan on-time
          </p>
          <InputCompOne
            parentClass="max-w-[733px] w-full mb-3"
            label="How much do you want to apply for?"
            name="loan"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-9"
            placeholder="350,000"
          />
          <div className="flex items-center justify-between w-full">
            <div className=" h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
              <span>Minimum Offer:</span>
              <p>
                <b>N</b>100,000
              </p>
            </div>

            <div className="h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
              <span>Maximum Offer:</span>
              <p>
                <b>N</b>500,000
              </p>
            </div>
          </div>

        </div>
      </div>
    </>
  );
};

export default LoanAmountComp;