/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-use-before-define */
/* eslint-disable import/prefer-default-export */
import * as React from 'react'
import { BsEyeSlash, BsEye } from 'react-icons/bs'
import { Input, InputProps } from './Input'

interface PasswordInputProps extends Omit<InputProps, 'type'> {}

export const PasswordInput = (props: PasswordInputProps) => {
  const [view, setView] = React.useState<boolean>(false)
  return (
    <Input
      {...props}
      type={view ? 'text' : 'password'}
      rightContent={
        <span onClick={() => setView(!view)} className="cursor-pointer">
          {view ? <BsEyeSlash size={20} /> : <BsEye size={20} />}
        </span>
      }
    />
  )
}