import React, { useRef } from "react";
import InputCompOne from "../shared/InputCompOne";

interface Option {
  value: string;
  label: string;
}

const BasicInfo: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  // Array for marital status options
  const maritalStatusOptions: Option[] = [
    { value: "", label: "Select" },
    { value: "single", label: "Single" },
    { value: "married", label: "Married" },
    { value: "divorced", label: "Divorced" },
    { value: "widowed", label: "Widowed" },
  ];

  // Array for title options
  const titleOptions: Option[] = [
    { value: "", label: "Select" },
    { value: "ms", label: "Ms" },
    { value: "mr", label: "Mr" },
    { value: "miss", label: "Miss" },
    { value: "mrs", label: "Mrs" },
  ];

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Handle input value changes
    console.log(e.target.value);
  };

  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
    // Handle input events
    console.log(e);
  };

  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={titleOptions}
          value=""
          onChange={handleChange}
          onInput={handleInput}
          ref={inputRef}
        />
        <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={maritalStatusOptions}
          value=""
          onChange={handleChange}
          onInput={handleInput}
          ref={inputRef}
        />
        <InputCompOne
          label="Direct Sales Agent ID"
          name="agentId"
          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=""
          onChange={handleChange}
          onInput={handleInput}
          ref={inputRef}
        />
        <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]"
          value=""
          onChange={handleChange}
          onInput={handleInput}
          ref={inputRef}
        />
      </div>
    </div>
  );
};

export default BasicInfo;