"use client";

import loadable from "@loadable/component";
import { TextField } from "../TextField";
import type { MaskedFieldProps } from "./MaskedField";

/** Lazy-loads MaskedField (and react-imask) so consumers importing only TextField don't bundle react-imask. */
const LoadableMaskedField = loadable(() => import("./MaskedField"), {
  resolveComponent: mod => mod.MaskedField,
});

export function MaskedField(props: MaskedFieldProps) {
  const {
    mask: _mask,
    useMaskedValue: _useMaskedValue,
    "data-testid": _dataTestId,
    ref: forwardedRef,
    ...textFieldProps
  } = props;
  return (
    <LoadableMaskedField
      {...props}
      fallback={
        <TextField
          {...textFieldProps}
          ref={forwardedRef}
          type="text"
          isDisabled
          isReadOnly
        />
      }
    />
  );
}

MaskedField.displayName = "MaskedField";

export type {
  MaskedFieldProps,
  MaskedFieldRef,
  MaskedFieldElementType,
} from "./MaskedField";
