import { forwardRef, useState } from 'react'
import { IconButton, Input, InputGroup, InputRightElement, type InputProps } from '@chakra-ui/react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'

// Input mot de passe avec bascule affichage clair/masqué (icône Font Awesome).
export const PasswordInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  const [visible, setVisible] = useState(false)

  return (
    <InputGroup>
      <Input ref={ref} type={visible ? 'text' : 'password'} {...props} />
      <InputRightElement>
        <IconButton
          aria-label={visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
          icon={<FontAwesomeIcon icon={visible ? faEyeSlash : faEye} />}
          size="sm"
          variant="ghost"
          tabIndex={-1}
          onClick={() => setVisible((v) => !v)}
        />
      </InputRightElement>
    </InputGroup>
  )
})
PasswordInput.displayName = 'PasswordInput'