import { type Ref } from "react";
import {
  formatRuPhoneDisplay,
  normalizeRuPhoneFromInput,
} from "@/landing/lib/phoneRu";

const inputClassName =
  "placeholder:btnl placeholder:font-medium placeholder:select-none peer btnl w-full h-full bg-transparent rounded-none transition-all outline-none";

interface PhoneInputRuProps {
  value: string;
  onChange: (value: string) => void;
  onBlur?: () => void;
  inputRef?: Ref<HTMLInputElement>;
  id?: string;
  placeholder?: string;
}

export function PhoneInputRu({
  value,
  onChange,
  onBlur,
  inputRef,
  id = "tel",
  placeholder = "+7 (XXX) XXX - XX - XX",
}: PhoneInputRuProps) {
  return (
    <input
      ref={inputRef}
      type="tel"
      autoComplete="tel"
      id={id}
      placeholder={placeholder}
      className={inputClassName}
      value={formatRuPhoneDisplay(value)}
      onBlur={onBlur}
      onChange={(e) => {
        if (!e.nativeEvent.type.startsWith("input")) return;
        const cleanValue = e.target.value.replace(/\s/g, "");
        const inputType = (e.nativeEvent as InputEvent).inputType;
        onChange(normalizeRuPhoneFromInput(cleanValue, inputType));
      }}
    />
  );
}