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

interface SpouseDetailsProps {
  inputValues: {
    spouseBVN: string;
  };
  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
  inputRef: React.RefObject<HTMLInputElement>;
}

const SpouseDetails: React.FC<SpouseDetailsProps> = ({
  inputValues,
  handleChange,
  handleInput,
  inputRef,
}) => {
  return (
    <>
      <div className="w-full rounded py-3 bg-[#5C2684] px-5 mt-5">
        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
          SPOUSE DETAILS ( If not applicable, please move to the next stage )
        </p>
      </div>
      <div className="mt-8 grid grid-cols-2">
        <div className="flex flex-col gap-4 max-w-[15.6875rem]">
          <InputCompOne
            parentClass="max-w-[20.3125rem]"
            label="BVN"
            name="spouseBVN"
            parentInputClass="w-full"
            labelSpan="( To get your BVN, dial *565*0# )"
            labelSpanClass="text-[11px] text-[#7a7373]"
            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]"
            value={inputValues.spouseBVN}
            onChange={handleChange}
            onInput={handleInput}
            ref={inputRef}
          />
        </div>
      </div>
    </>
  );
};

export default SpouseDetails;