no-copy-frontend/src/app/ui/inputs/phone-input.tsx

'use client'

import { useState, ChangeEvent } from 'react';
import { InputMask } from '@react-input/mask';
import styles from '@/app/styles/module/login.module.scss';

interface PhoneInputProps {
	phoneState: string | undefined;
	validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
}

export default function PhoneInput({ phoneState, validateHandler }: PhoneInputProps) {
	const [phone, setPhone] = useState(phoneState ? phoneState : '');

	return (
		<InputMask
			type="phone"
			id="phone"
			name="phone"
			className={`${styles['form-input']}`}
			mask="+7 (___) ___-__-__"
			replacement={{ _: /\d/ }}
			value={phone}
			onChange={(e) => {
				setPhone(e.target.value);
				validateHandler(e);
			}}
			placeholder="+7 (999) 123-45-67"
		/>
	)
}