"use client";

import { useRef, useState } from "react";

const LEN = 6;

export function OtpInput() {
  const [values, setValues] = useState<string[]>(Array(LEN).fill(""));
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  function setAt(i: number, v: string) {
    const next = [...values];
    next[i] = v.slice(-1);
    setValues(next);
    if (v && i < LEN - 1) refs.current[i + 1]?.focus();
  }

  function onKey(i: number, e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === "Backspace" && !values[i] && i > 0) {
      refs.current[i - 1]?.focus();
    }
  }

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center min-h-[220px]">
      <div className="text-center">
        <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66] mb-1">
          Verification
        </div>
        <h3
          className="text-[#111111] tracking-[-0.01em] mb-6"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: 24,
          }}
        >
          Enter the 6-digit code
        </h3>
        <div className="flex gap-2 justify-center">
          {values.map((v, i) => (
            <input
              key={i}
              ref={(el) => {
                refs.current[i] = el;
              }}
              type="text"
              inputMode="numeric"
              maxLength={1}
              value={v}
              onChange={(e) => setAt(i, e.target.value.replace(/\D/g, ""))}
              onKeyDown={(e) => onKey(i, e)}
              className={`w-11 h-12 text-center bg-[#FAFAF8] border outline-none transition-colors text-[20px] text-[#111111] ${
                v ? "border-[#2A3D2F]" : "border-[#1111111A]"
              } focus:border-[#111111]`}
              style={{
                fontFamily: "'Instrument Serif', Georgia, serif",
              }}
            />
          ))}
        </div>
        <div className="font-mono text-[11px] text-[#6B6B66] mt-4">
          Didn&apos;t receive it? <span className="text-[#111111] underline cursor-pointer">Resend</span>
        </div>
      </div>
    </div>
  );
}
OTP Code Input

Enter the 6-digit code
