import React from "react";

const Inputuser = ({
  inputplaceholder,
  inputtype,
  inputclassname,
  labelclassname,
  handleAutoComplete,
  handleName,
  handleId,
  handleValue,
  handleOnChange,
  handleOnBlur,
}: any) => {
  return (
    <>
      <input
        type={inputtype || "text"}
        className={`${
          inputclassname || "w-1/2"
        } border-[1px] border-solid border-bordercolor rounded-[5px] peer placeholder:text-bordercolor focus:placeholder:opacity-0 focus:placeholder:text-transparent h-[60px] p-[10px]`}
        placeholder={inputplaceholder}
        autoComplete={handleAutoComplete}
        id={handleId}
        name={handleName}
        value={handleValue}
        onChange={handleOnChange}
        onBlur={handleOnBlur}
      />
      <label
        htmlFor={inputplaceholder}
        className={`${
          labelclassname || "left-0"
        } absolute  px-1 ml-1 text-sm text-bordercolor duration-100 ease-linear -translate-y-3 bg-white opacity-0 peer-focus:opacity-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:text-base peer-placeholder-shown:text-bordercolor peer-focus:ml-1 peer-focus:-translate-y-3 peer-focus:px-1 peer-focus:text-sm`}
      >
        {inputplaceholder}
      </label>
    </>
  );
};

export default Inputuser;