Passport Input Incremental

"use client";

import { useState } from "react";
import { PassportInputIncremental } from "@/components/domain-ui/india/passport-input-incremental";
import { cn } from "@/lib/utils";
import type { ValidationStatusType } from "@/hooks/use-incremental-regex";

export default function PassportInputIncrementalDemo() {
  const [validationStatus, setValidationStatus] =
    useState<ValidationStatusType>("invalid");

  return (
    <div className="max-w-xs sm:w-full md:max-w-sm">
      <PassportInputIncremental
        placeholder="Enter passport number (e.g., A1234567)"
        onValidation={setValidationStatus}
        className={cn({
          "border-green-500 focus-visible:ring-green-500":
            validationStatus === "valid",
          "border-yellow-500 focus-visible:ring-yellow-500":
            validationStatus === "incomplete",
          "border-destructive focus-visible:ring-destructive":
            validationStatus === "invalid",
        })}
      />
    </div>
  );
}