'use client';

import { useMaskito } from '@maskito/react';
import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
import metadata from 'libphonenumber-js/min/metadata';
import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
import { Input } from '@shared/ui';

type PhoneInput = {
  className?: string;
  variant?: 'default' | 'ghost';
  error?: string | boolean;
  errorTextColor?: string;
  fullWidth?: boolean;
} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

function PhoneInput({ ...props }: PhoneInput) {
  const options = maskitoPhoneOptionsGenerator({
    countryIsoCode: 'RU',
    metadata,
  });
  const maskedInputRef = useMaskito({ options });

  return <Input {...props} ref={maskedInputRef} type='tel' />;
}

export { PhoneInput };
