Field

import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Field — a vertical layout wrapper that groups a `Label`, a control, and its
 * description / error text with consistent spacing.
 *
 * RSC-safe by design: it uses no React context or hooks, so the accessible
 * wiring stays explicit and server-renderable. Associate parts by id:
 *
 * ```tsx
 * <Field>
 *   <Label htmlFor="email">Email</Label>
 *   <Input id="email" aria-describedby="email-hint" aria-invalid={hasError} />
 *   <FieldDescription id="email-hint">Work address preferred.</FieldDescription>
 *   {hasError ? <FieldError id="email-error">Enter a valid email.</FieldError> : null}
 * </Field>
 * ```
 */
export function Field({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="field"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  );
}

/**
 * FieldDescription — supplementary help text. Reference its `id` from the
 * control's `aria-describedby`.
 */
export function FieldDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="field-description"
      className={cn("text-sm text-vexa-muted-foreground", className)}
      {...props}
    />
  );
}

/**
 * FieldError — an error message. Reference its `id` from the control's
 * `aria-describedby` (or `aria-errormessage`) and set `aria-invalid` on the
 * control. Errors should name both the problem and the recovery action.
 * A leading icon or `"Error:"` prefix keeps meaning from relying on color.
 */
export function FieldError({
  className,
  children,
  ...props
}: React.ComponentProps<"p">) {
  if (children == null || children === false) return null;
  return (
    <p
      data-slot="field-error"
      className={cn(
        "flex items-center gap-1.5 text-sm font-medium text-vexa-danger",
        "[&_svg]:size-4 [&_svg]:shrink-0",
        className,
      )}
      {...props}
    >
      {children}
    </p>
  );
}