"use client";

import { forwardRef, useState } from "react";
import { Eye, EyeOff } from "lucide-react";
import styles from "./PasswordField.module.css";

interface PasswordFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Classe de l'input du formulaire appelant (pour hériter le style existant). */
  inputClassName?: string;
}

const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(
  { inputClassName, style, ...props },
  ref,
) {
  const [visible, setVisible] = useState(false);

  return (
    <div className={styles.wrap}>
      <input
        ref={ref}
        type={visible ? "text" : "password"}
        className={inputClassName}
        style={{ paddingRight: 40, ...style }}
        {...props}
      />
      <button
        type="button"
        className={styles.toggle}
        onClick={() => setVisible((v) => !v)}
        aria-label={visible ? "Masquer le mot de passe" : "Afficher le mot de passe"}
        tabIndex={-1}
      >
        {visible ? <EyeOff size={18} strokeWidth={1.8} /> : <Eye size={18} strokeWidth={1.8} />}
      </button>
    </div>
  );
});

export default PasswordField;