Regex Input Incremental

"use client";

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

const alphanumericRegex = /^[A-Z]{3}[0-9]{4}$/;

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

  return (
    <div className="max-w-xs sm:w-full md:max-w-sm">
      <RegexInputIncremental
        placeholder="Enter product code (e.g., ABC1234)"
        regex={alphanumericRegex}
        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>
  );
}