"use client";

import { useRef } from "react";

export default function OTPInput() {
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    if (e.target.value && index < 5) {
      refs.current[index + 1]?.focus();
    }
  };

  return (
    <div className="flex gap-3">
      {[...Array(6)].map((_, index) => (
        <input
          key={index}
          maxLength={1}
          ref={(el) => {
            refs.current[index] = el;
          }}
          onChange={(e) => handleChange(e, index)}
          className="h-16 w-16 rounded-xl border border-slate-700 bg-[#13233a] text-center text-2xl text-white outline-none focus:border-teal-400"
        />
      ))}
    </div>
  );
}