import { LockOutlined } from '@ant-design/icons';
import { ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';

const OtpForm = () => {
  const intl = useIntl();

  return (
    <>
      <ProFormText
        name="otp"
        fieldProps={{
          autoComplete: 'one-time-code',
          autoFocus: true,
          size: 'large',
          maxLength: 6,
          prefix: <LockOutlined className={'prefixIcon'} />,
        }}
        placeholder={intl.formatMessage({
          id: 'master.auth.otp.placeholder',
          defaultMessage: 'Enter OTP code',
        })}
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="master.auth.otp.required"
                defaultMessage="OTP code is required"
              />
            ),
          },
          {
            len: 6,
            message: (
              <FormattedMessage
                id="master.auth.otp.length"
                defaultMessage="OTP must be 6 digits"
              />
            ),
          },
        ]}
      />
    </>
  );
};

export default OtpForm;
