import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import Input from "../../../input/index.js";
import React from "react";
import { useControllableValue } from "ahooks";
import card from "./card.png";
import "./index.less";
//#region src/components/pisellInput/components/SecurityCode/index.tsx
const SecurityCode = (props) => {
	const { maxLength, showCVCIcon = true } = props;
	const [state, setState] = useControllableValue(props, { defaultValue: "" });
	const handleChange = (e) => {
		const { value } = e.target;
		let numberValue = value.replace(/\D/g, "");
		if (maxLength) numberValue = numberValue.slice(0, maxLength);
		setState === null || setState === void 0 || setState(numberValue);
	};
	return /* @__PURE__ */ React.createElement(Input, _objectSpread2(_objectSpread2({}, props), {}, {
		value: state,
		onChange: handleChange,
		maxLength,
		size: "large",
		placeholder: "CVC",
		type: "number",
		suffix: showCVCIcon && /* @__PURE__ */ React.createElement("img", {
			className: "pisell-security-code-suffix",
			src: card,
			alt: "security code img"
		})
	}));
};
//#endregion
export { SecurityCode as default };
