import React, { useState } from 'react';

interface IPasswordProps {
  id: string;
  name: string;
  value: string;
  placeholder?: string;
  hasError?: boolean;
  goodInput?: boolean;
  onChange(e: React.ChangeEvent<any>): void;
}

const Password = ({
  name,
  value,
  placeholder,
  hasError,
  goodInput,
  onChange,
}: IPasswordProps): JSX.Element => {
  const [passwordShown, setPasswordShown] = useState<boolean>(false);

  const togglePasswordVisibility = (): void => setPasswordShown(!passwordShown);

  return (
    <div className="relative">
      <input
        type={passwordShown ? 'text' : 'password'}
        name={name}
        value={value}
        placeholder={placeholder}
        onChange={onChange}
        className={`form-input text-sm w-full border border-slate-200 rounded-md py-2 px-4 placeholder:text-xs focus:outline-none ${
          hasError ? '!border-rose-300' : goodInput ? '!border-emerald-300' : ''
        }`}
        autoComplete="on"
      />
      <button
        type="button"
        className="h-full absolute top-0 right-4 flex items-center"
        onClick={togglePasswordVisibility}
      >
        <img
          src={`/icons/eye-${passwordShown ? 'open' : 'close'}.svg`}
          alt="eye"
          className="h-5"
        />
      </button>
    </div>
  );
};

export default Password;