/* eslint-disable react-hooks/exhaustive-deps */
import { useMask } from "@react-input/mask";

interface InputProps {
  type?: "text" | "email" | "password" | "time" | "tel";
  value?: string;
  placeholder?: string;
  autoFocus?: boolean;
  required?: boolean;
  readOnly?: boolean;
  className?: string;
  handleChange?: (value: string) => void;
  handleFocus?: () => void;
}

function Input({
  type = "text",
  value,
  placeholder,
  autoFocus,
  required,
  readOnly,
  className,
  handleChange,
  handleFocus,
}: InputProps) {
  const inputRef = useMask({
    mask: "+7 (___) ___-__-__",
    replacement: { _: /\d/ },
  });

  return (
    <input
      ref={type === "tel" ? inputRef : undefined}
      type={type}
      placeholder={placeholder}
      autoFocus={autoFocus}
      required={required}
      readOnly={readOnly}
      value={value}
      onChange={(e) => handleChange && handleChange(e.target.value)}
      onFocus={handleFocus}
      className={`px-3 py-2.5 outline-none rounded-lg ring-1 ring-[#DAE0E5] focus:ring-[#49A1F5] ring-inset transition-all text-sm ${className}`}
    />
  );
}

export default Input;