import { forwardRef } from 'react';
import type { InputRef } from 'antd';
import { InputUI } from '../../primitives/input';
import { createEmailValidatorPlugin } from './plugins';
import type { InputUIProps } from '../../primitives/input';

export type EmailInputUIProps = InputUIProps;

export const EmailInputUI = forwardRef<InputRef, EmailInputUIProps>(function EmailInputUI(
  {
    commitPlugins = [],
    inputMode = 'email',
    placeholder = '이메일을 입력하세요',
    autoComplete = 'email',
    ...restProps
  },
  ref,
) {
  return (
    <InputUI
      {...restProps}
      ref={ref}
      inputMode={inputMode}
      placeholder={placeholder}
      autoComplete={autoComplete}
      commitPlugins={[createEmailValidatorPlugin(), ...commitPlugins]}
    />
  );
});
