Regex Input

"use client";

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

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

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

  return (
    <div className="max-w-xs sm:w-full md:max-w-sm">
      <RegexInput
        placeholder="Enter product code (e.g., ABC1234)"
        regex={alphanumericRegex}
        onValidation={setValidationStatus}
        className={cn({
          "border-green-500 focus-visible:ring-green-500":
            validationStatus === "valid",
          "border-destructive focus-visible:ring-destructive":
            validationStatus === "invalid",
        })}
      />
    </div>
  );
}