import { css } from "@emotion/react";
import type { Ref } from "react";
import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
import { TextField as AriaTextField } from "react-aria-components";

import { fieldBaseCSS } from "@phoenix/components/core/field/styles";
import type { SizingProps } from "@phoenix/components/core/types";

import { textFieldCSS } from "./styles";

export interface TextFieldProps extends AriaTextFieldProps, SizingProps {}

function TextField({
  ref,
  ...props
}: TextFieldProps & { ref?: Ref<HTMLDivElement> }) {
  const { size = "M", ...otherProps } = props;
  return (
    <AriaTextField
      data-size={size}
      className="text-field"
      ref={ref}
      {...otherProps}
      css={css(fieldBaseCSS, textFieldCSS)}
    />
  );
}

export { TextField };
