import { Icon } from "@iconify/react";
import { InputAdornment, TextField, Tooltip } from "@mui/material";
import { useId } from "react";

/**
 * Wrapper de TextField con helperText estandarizado + ícono info opcional.
 *
 * Props (todas pasan al TextField):
 *   hint        — string que va al helperText (ej: "Ej: 4.500.000")
 *   tooltip     — string opcional para ícono info en endAdornment
 *   size        — default 'small'
 *
 * Garantiza aria-describedby del helperText.
 */
export function FieldHint({
  hint,
  tooltip,
  size = "small",
  InputProps,
  inputProps,
  id: idProp,
  helperText,
  ...rest
}) {
  const autoId = useId();
  const id = idProp ?? autoId;
  const helperId = `${id}-helper`;
  const finalHelper = helperText ?? hint;

  const endAdornment = tooltip ? (
    <InputAdornment position="end">
      <Tooltip title={tooltip} enterDelay={300}>
        <span style={{ display: "inline-flex" }}>
          <Icon icon="mdi:information-outline" width={16} style={{ opacity: 0.6 }} />
        </span>
      </Tooltip>
    </InputAdornment>
  ) : null;

  return (
    <TextField
      id={id}
      size={size}
      helperText={finalHelper}
      FormHelperTextProps={{ id: helperId }}
      inputProps={{ "aria-describedby": helperId, ...(inputProps || {}) }}
      InputProps={{ endAdornment, ...(InputProps || {}) }}
      {...rest}
    />
  );
}