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

const BasicInfo = (): FC => {
  return (
    <div className="mt-8">
      <div className="flex flex-col gap-3">
        <InputCompOne
          label="Title"
          name="title"
          parentInputClass="max-w-[224px] w-full"
          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
          select
          selectClass="w-full h-[36px]"
          selectOptions={[
            {
              value: "",
              label: "Select",
            },
            {
              value: "ms",
              label: "Ms",
            },
            {
              value: "mr",
              label: "Mr",
            },
            {
              value: "miss",
              label: "Miss",
            },
            {
              value: "mrs",
              label: "Mrs",
            },
          ]}
        />
        <InputCompOne
          label="Marital Status"
          name="marital"
          parentInputClass="max-w-[224px] w-full"
          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
          select
          selectClass="w-full h-[36px]"
          selectOptions={[
            {
              value: "",
              label: "Select",
            },
            {
              value: "ms",
              label: "Ms",
            },
            {
              value: "mr",
              label: "Mr",
            },
            {
              value: "miss",
              label: "Miss",
            },
            {
              value: "mrs",
              label: "Mrs",
            },
          ]}
        />
        <InputCompOne
          label="Direct Sales Agent ID"
          name="title"
          parentInputClass="max-w-[224px] w-full"
          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
          select
          selectClass="w-full h-[36px]"
          selectOptions={[
            {
              value: "",
              label: "Select",
            },
          ]}
        />
        <InputCompOne
          label="BVN"
          name="bvn"
          parentInputClass="max-w-[224px] w-full"
          labelSpan="( To get your BVN, dial *565*0# )"
          labelSpanClass="text-[11px] text-[#7a7373]"
          placeholder="Enter your BVN"
          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
          input
          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
        />
      </div>
    </div>
  );
};

export default BasicInfo;
