import React, { useState } from 'react';

interface PasswordInputProps {
  id: string;
  name?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  required?: boolean;
  placeholder?: string;
  className?: string;
  label?: string;
}

const PasswordInput: React.FC<PasswordInputProps> = ({
  id,
  name,
  value,
  onChange,
  required = false,
  placeholder,
  className = 'form-control',
  label
}) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="mb-3">
      {label && (
        <label htmlFor={id} className="form-label">
          {label}
        </label>
      )}
      <div className="position-relative">
        <input
          type={showPassword ? 'text' : 'password'}
          className={className}
          id={id}
          name={name || id}
          value={value}
          onChange={onChange}
          required={required}
          placeholder={placeholder}
        />
        <button
          type="button"
          className="btn btn-link position-absolute end-0 top-50 translate-middle-y text-secondary p-0 pe-2"
          onClick={() => setShowPassword(!showPassword)}
          style={{ zIndex: 10, textDecoration: 'none' }}
          tabIndex={-1}
        >
          <i className={`bi ${showPassword ? 'bi-eye' : 'bi-eye-slash'}`}></i>
        </button>
      </div>
    </div>
  );
};

export default PasswordInput;