PinInput

"use client";

import { useState } from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  PinInput,
  Badge,
  Button
} from "@pimolu/react";

function VerificationCard() {
  const [code, setCode] = useState<string[]>([
    "",
    "",
    "",
    "",
    "",
    "",
  ]);
  const [completed, setCompleted] = useState<string | null>(null);
  const complete = code.every(Boolean);
  return (
    <Card>
      <CardHeader>
        <CardTitle>Two-factor verification</CardTitle>
        <CardDescription>
          Enter the six-digit code from your authenticator app. The code
          is grouped as 3 + 3 for easier reading.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-5 min-w-0">
          <PinInput
            label="Authentication code"
            length={6}
            groups={[3, 3]}
            value={code}
            onValueChange={(next: string[]) => {
              setCode(next);
              setCompleted(null);
            }}
            onComplete={setCompleted}
          />
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <Badge variant={complete ? "success" : "neutral"}>
              {complete ? "Complete" : "Waiting"}
            </Badge>
            <Button size="sm" disabled={!complete}>Verify</Button>
            <Button
              size="sm"
              appearance="ghost"
              onClick={() => {
                setCode(["", "", "", "", "", ""]);
                setCompleted(null);
              }}
            >
              Reset
            </Button>
          </div>
          <p className="text-sm text-muted leading-relaxed">
            {
              completed
                ? `onComplete received "${completed}".`
                : "The verification action stays disabled until every cell is filled."
            }
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

export function DemoExample() {
  return (<VerificationCard />);
}