Field

"use client";

import type React from "react";
import { cn } from "@/lib/utils";
import {
  Field,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/component";

function Input({
  className,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <span
      className={cn(
        "relative inline-flex w-full rounded-lg border border-input bg-background text-sm text-foreground shadow-sm transition-shadow has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24",
        className,
      )}
      data-slot="input-control"
    >
      <input
        className="h-8 w-full min-w-0 rounded-[inherit] bg-transparent px-3 leading-8 outline-none placeholder:text-muted-foreground/60"
        {...props}
      />
    </span>
  );
}

export default function FieldWithValidityDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input placeholder="Enter your email" required type="email" />
          <FieldValidity>
            {(validity) => (
              <div className="flex w-full flex-col gap-2">
                {validity.error && (
                  <p className="text-destructive-foreground text-xs">
                    {validity.error}
                  </p>
                )}
                <div className="w-full rounded-md bg-muted p-2">
                  <pre className="max-h-60 overflow-y-auto font-mono text-xs [scrollbar-width:none]">
                    {JSON.stringify(validity, null, 2)}
                  </pre>
                </div>
              </div>
            )}
          </FieldValidity>
        </Field>
      </div>
    </div>
  );
}