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

const EmploymentDetails: React.FC = () => {
  return (
    <>
      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
          EMPLOYMENT DETAILS
        </p>
      </div>

      <div className="flex flex-col gap-4">
        <InputCompOne
          parentClass="max-w-[17.9375rem] w-full"
          label="Job Title"
          name="jobTitle"
          parentInputClass="w-full"
          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
          input
          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
        />
        <div className="flex items-center gap-[3.6875rem]">
          <InputCompOne
            parentClass="max-w-[23.1875rem] w-full"
            label="Employer’s Name"
            name="employerName"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
          <InputCompOne
            parentClass="max-w-[23.1875rem] w-full"
            label="Employer’s Official Email"
            name="employerOfficialEmail"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
        </div>
        <div className="flex items-center gap-[9rem]">
          <InputCompOne
            parentClass="max-w-[17.9375rem] w-full"
            label="Resumption Date"
            name="resumptionDate"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
          <InputCompOne
            parentClass="max-w-[17.9375rem] w-full"
            label="Employee ID."
            name="employeeID"
            labelSpan="Upload your work ID"
            labelSpanClass="text-[11px] text-[#7a7373]"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
        </div>
        <div className="flex items-center gap-[3.6875rem]">
          <InputCompOne
            parentClass="max-w-[23.1875rem] w-full"
            label="Salary ( Gross annual income )"
            name="salaryGross"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
          <InputCompOne
            parentClass="max-w-[23.1875rem] w-full"
            label="Salary ( Net monthly Income )"
            name="salaryNet"
            parentInputClass="w-full"
            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
            input
            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
          />
        </div>
        <InputCompOne
          parentClass="max-w-[20.3125rem]"
          label="Salary Payment Date"
          name="salary-payment-date"
          parentInputClass="w-full"
          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
          input
          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
        />
      </div>
    </>
  );
};

export default EmploymentDetails;