import React from "react";
import Icons from "../../Icons";
import { Link } from "react-router-dom";

export default function InputCom({
  label,
  type,
  name,
  placeholder,
  iconName,
  passIcon,
  inputHandler,
  value,
  forgotPassword,
  onClick,
  disable,
  blurHandler,
}) {
  return (
    <div className="input-com">
      <div className="flex items-center justify-between">
      {label && (
        <label
          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
          htmlFor={name}
        >
          {label}
        </label>
      )}
      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
      </div>
      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
        <input
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
          className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
          type={type}
          id={name}
          name={name}
          readOnly={disable}
          onBlur={blurHandler}
        />
        {iconName && (
          <div className="absolute right-6 bottom-[10px] z-10">
            <Icons name={iconName} />
          </div>
        )}
        {passIcon && (
          <div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
            <Icons name={passIcon} />
          </div>
        )}
      </div>
    </div>
  );
}