import { Input } from '@/components/ui/input';
import { REGISTRATION_OTP_LENGTH } from '@/auth/registration/constants';

export interface OtpSixInputsProps {
  otp: string[];
  disabled?: boolean;
  inputRefs: React.MutableRefObject<Array<HTMLInputElement | null>>;
  onDigitChange: (index: number, value: string) => void;
  onKeyDown: (index: number, e: React.KeyboardEvent<HTMLInputElement>) => void;
  onPaste: (e: React.ClipboardEvent<HTMLDivElement>) => void;
}

export function OtpSixInputs({
  otp,
  disabled,
  inputRefs,
  onDigitChange,
  onKeyDown,
  onPaste,
}: OtpSixInputsProps) {
  return (
    <div className="flex gap-2 justify-center" onPaste={onPaste}>
      {otp.map((digit, i) => (
        <Input
          key={i}
          ref={(el) => {
            inputRefs.current[i] = el;
          }}
          type="text"
          inputMode="numeric"
          autoComplete={i === 0 ? 'one-time-code' : 'off'}
          maxLength={1}
          value={digit}
          onChange={(e) => onDigitChange(i, e.target.value)}
          onKeyDown={(e) => onKeyDown(i, e)}
          onFocus={(e) => e.currentTarget.select()}
          disabled={disabled}
          className="w-11 h-12 text-center text-lg font-semibold"
          aria-label={`Chữ số thứ ${i + 1}`}
        />
      ))}
    </div>
  );
}

export function emptyOtpDigits(): string[] {
  return Array(REGISTRATION_OTP_LENGTH).fill('');
}
