import React from 'react';

export interface SimpleInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
  /** Etiqueta visible asociada al campo de entrada */
  label?: string;
  /** Clases CSS personalizables para distintos elementos */
  className?: {
    /** Clases para el contenedor del input */
    container?: string;
    /** Clases para la etiqueta */
    label?: string;
    /** Clases para el input */
    input?: string;
  };
}

/**
 * Componente de entrada (`Input`) sin lógica de mostrar/ocultar contraseña.
 */
export default function SimpleInput(props: SimpleInputProps) {
  const { label, name, id, className, ...rest } = props;

  const inputId =
    id || name || (label ? `input-${label.replace(/\s+/g, '-')}` : undefined);

  return (
    <div className={className?.container || 'mb-3'}>
      {label && inputId && (
        <label htmlFor={inputId} className={className?.label || 'form-label'}>
          {label}
        </label>
      )}
      <input
        id={inputId}
        name={name}
        className={className?.input || 'form-control'}
        {...rest}
      />
    </div>
  );
}
