import { Input } from '../../reusable/Input';

export function PhoneInput({
  label,
  required,
  value,
  onChange,
}: {
  label: string;
  required?: boolean;
  value: string;
  onChange: (val: string) => void;
}) {
  return (
    <Input
      label={label}
      required={required}
      type="text"
      inputMode="numeric"
      prefix="+91"
      maxLength={10}
      placeholder="10-digit number"
      value={value ?? ''}
      onChange={(e) => {
        const numericOnly = e.target.value.replace(/\D/g, '');
        if (numericOnly.length <= 10) {
          onChange(numericOnly);
        }
      }}
    />
  );
}