"use client";
import {useState } from "react";

export default function InputPassword({id, name,label, require,value,onChange}:any) {
  const [showPassword, setShowPassword] = useState(false);
  return (
    <div className="relative mt-4">
      <div>
        <input
          type={showPassword ? "text" : "password"}
          name={name}
          value={value}
          id={id}
          className="peer text-md block w-full appearance-none border-0 border-b-1 border-gray-400 bg-transparent px-0 py-2 font-semibold text-slate-950 focus:border-slate-950 focus:ring-0 focus:outline-none"
          placeholder=" "
          required={require}
          onChange={onChange}
          autoComplete="new_password"
        />
        <span
          aria-label={
            showPassword ? "Password Visible" : "Password Invisible."
          }
          onClick={() => {
            setShowPassword((prev) => !prev);
          }}
          className="absolute top-1 right-0 p-2 cursor-pointer">
            {showPassword ? (
            <i className="icon-[mynaui--eye]"></i>
            ):(
              <i className="icon-[mynaui--eye-slash]"></i>
            )}
            
        </span>
        <label
          htmlFor={id}
          className="absolute top-3 z-10 origin-[0] -translate-y-6 scale-100 transform text-sm font-medium text-gray-800 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-100 peer-focus:text-gray-800"
        >{require ? <>*{label}</> : <>{label}</>}
        </label>
      </div>
    </div>
  );
}