import { Button, InputCompOne, Stepper } from "..";
// import { useNavigate } from "react-router-dom";
// import { RouteHandler } from "../../router/routes";

type Props = {
  handleNextStep:()=>any
}

export default function DashboardFormInit({handleNextStep}:Props) {

  // let navigate = useNavigate();
  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);

  return (
    <div className="w-full">
      <div className="w-full flex justify-center">
        <Stepper step={0} />
      </div>
      <div className="mt-[3.25rem] flex flex-col gap-9">
        <InputCompOne
          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
          name="applyIshInput"
          label="How Much Do You Want To Apply For?"
          labelClass="font-bold text-[1.125rem]"
          input
          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
          placeholder="350,000"
        />
        <InputCompOne
          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
          name="applyIshInput"
          label="For How Many Months?"
          labelClass="font-bold text-[1.125rem]"
          select={true}
          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
          // selectValue=''
          selectOptions={duration}
          // onChange={()=>{}}
        />
        <InputCompOne
          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
          name="applyIshInput"
          label="Direct sales agent ID ( Optional )"
          labelClass="font-bold text-[1.125rem]"
          floatLabel='Enter agent ID'
          input
          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
          placeholder="Agent ID"
        />
        <Button
          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
          text="Next"
          type="button"
          onClick={handleNextStep}
        />
      </div>
    </div>
  );
}

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


const duration: Option[] = [
  { value: "", label: "Please Select" },
  { value: "6", label: "6 Months" },
  { value: "12", label: "12 Months" },
  { value: "18", label: "18 Months" },
  { value: "24", label: "24 Months" },
];