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

const PasswordInput = ({onChange}) => {
  const [showPassword, setShowPassword] = useState(false);
  const [password, setPassword] = useState('');

  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  const changeEvent = (e) => {
    setPassword(e.target.value);
    onChange(e);
  }

  return (
    <div className="relative w-full max-w-sm">
      <input
        type={showPassword ? 'text' : 'password'}
        value={password}
        onChange={changeEvent}
        className="w-full px-3 py-2 border rounded-md pr-10 text-sm"
        placeholder="Enter password"
      />
      <button
        type="button"
        style={{  // Explicit styles to override any external CSS
          width: '20px',
          height: '20px',
          padding: '0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'transparent',
          border: 'none',
          position: 'absolute',
          right: '8px',
          top: '10%',
          transform: 'translateY(-50%)',
          cursor: 'pointer'
        }}
        onClick={togglePasswordVisibility}
        aria-label={showPassword ? "Hide password" : "Show password"}
      >
        {showPassword ? (
          <Eye 
            className="text-gray-500" 
            size={16}  // Explicit size for the icon
          />
        ) : (
          <EyeOff 
            className="text-gray-500" 
            size={16}  // Explicit size for the icon
          />
        )}
      </button>
    </div>
  );
};

export default PasswordInput;