import React, { useState } from 'react';

export interface PasswordInputProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    'type' | 'className'
  > {
  /**
   * Texto de la etiqueta asociada al input (opcional).
   */
  label?: string;
  /**
   * Clases CSS personalizables para distintos elementos.
   */
  className?: {
    /** Clases para el contenedor del componente */
    container?: string;
    /** Clases para la etiqueta */
    label?: string;
    /** Clases para el campo input */
    input?: string;
    /** Clases para el botón de toggle */
    button?: string;
  };
}

/**
 * Componente especializado para inputs de contraseña con botón de mostrar/ocultar.
 */
export default function PasswordInput(props: PasswordInputProps) {
  const { label, name, id, className, ...rest } = props;
  const [visible, setVisible] = useState(false);

  // Determina el tipo de input según el estado de visibilidad
  const inputType = visible ? 'text' : 'password';
  const inputId =
    id ||
    name ||
    (label ? `password-${label.replace(/\s+/g, '-')}` : undefined);

  const toggleVisibility = () => setVisible((v) => !v);

  return (
    <div className={className?.container || 'mb-3'}>
      {label && inputId && (
        <label htmlFor={inputId} className={className?.label || 'form-label'}>
          {label}
        </label>
      )}
      <div className="input-group">
        <input
          id={inputId}
          name={name}
          type={inputType}
          className={className?.input || 'form-control'}
          {...rest}
        />
        <button
          type="button"
          className={className?.button || 'btn btn-light border'}
          onClick={toggleVisibility}
          aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
          title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
        >
          <i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
        </button>
      </div>
    </div>
  );
}