'use client';

import { forwardRef, useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';

/**
 * A password <input> with a show/hide eye button, so the person can check
 * what they typed before submitting. Defaults to hidden; toggling never
 * changes the value, only whether it's rendered as dots or plain text.
 * Forwards everything else straight to the underlying <input> (value,
 * onChange, autoComplete, required, autoFocus, etc.) so it's a drop-in
 * replacement for <input type="password" />.
 */
const PasswordInput = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  ({ className = '', ...props }, ref) => {
    const [visible, setVisible] = useState(false);
    return (
      <div className="relative">
        <input
          {...props}
          ref={ref}
          type={visible ? 'text' : 'password'}
          className={`w-full border border-brand-border rounded-lg pl-3 pr-10 py-2 text-sm focus:outline-none focus:border-brand-red ${className}`}
        />
        <button
          type="button"
          tabIndex={-1}
          onClick={() => setVisible((v) => !v)}
          aria-label={visible ? 'Hide password' : 'Show password'}
          className="absolute inset-y-0 right-0 px-3 text-gray-400 hover:text-brand-charcoal transition-colors"
        >
          {visible ? <EyeOff size={16} /> : <Eye size={16} />}
        </button>
      </div>
    );
  }
);
PasswordInput.displayName = 'PasswordInput';

export default PasswordInput;