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

/**
 * Wrapper de TextField/Select con helperText estandarizado y ícono info.
 * Props extra:
 *   ejemplo  — texto corto de ejemplo ("Ej: 2.798.309")
 *   hint     — texto descriptivo ampliado (aparece en tooltip del ícono)
 */
export const FieldHint = forwardRef(function FieldHint(
  { ejemplo, hint, helperText, InputProps = {}, ...rest },
  ref
) {
  const helper = helperText ?? (ejemplo ? ejemplo : undefined);

  const endAdornment = hint ? (
    <InputAdornment position="end">
      <Tooltip title={hint} enterDelay={300} arrow placement="top">
        <span style={{ display: "flex", cursor: "help" }}>
          <Icon icon="mdi:information-outline" width={16} style={{ color: "#94a3b8" }} />
        </span>
      </Tooltip>
    </InputAdornment>
  ) : InputProps.endAdornment;

  return (
    <TextField
      ref={ref}
      helperText={helper}
      InputProps={{ ...InputProps, endAdornment }}
      {...rest}
    />
  );
});