OTP Input

"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

type State = "empty" | "typing" | "complete" | "error";

export function OTP({ state = "empty" }: { state?: State }) {
const init =
  state === "complete" || state === "error"
    ? ["4", "2", "0", "6", "9", "1"]
    : state === "typing"
      ? ["4", "2", "0", "", "", ""]
      : ["", "", "", "", "", ""];

const [vals, setVals] = useState<string[]>(init);
useEffect(() => setVals(init), [state]);

const focusIdx = vals.findIndex((v) => v === "");

return (
  <div className="w-full max-w-md">
    <p className="mb-3 font-mono text-[11px] text-muted-foreground">驗證碼已寄到 +886 ****1234</p>
    <div className="flex justify-center gap-2">
      {vals.map((v, i) => (
        <div
          key={i}
          className={cn(
            "grid h-12 w-10 place-items-center rounded-md border bg-background/50 font-mono text-lg transition-colors",
            v ? "border-border text-foreground" : "border-border/60 text-muted-foreground",
            i === focusIdx && state === "typing" && "border-lab-accent ring-2 ring-lab-accent/30",
            state === "complete" && "border-emerald-500/60",
            state === "error" && "border-red-500/70 text-red-500",
          )}
        >
          {v || (i === focusIdx && state === "typing" ? "_" : "")}
        </div>
      ))}
    </div>
    {state === "error" && (
      <p className="mt-3 text-center font-mono text-[11px] text-red-500">驗證碼錯誤,請重試</p>
    )}
    {state === "complete" && (
      <p className="mt-3 text-center font-mono text-[11px] text-emerald-500">驗證成功 ✓</p>
    )}
  </div>
);
}