import { Label } from "@aur-ui/ui/components/label";
import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

type FieldProps = {
  /** Field label text. Omit for a control that labels itself. */
  label?: ReactNode;
  /** Associates the label with the control. */
  htmlFor?: string;
  /** Helper text shown below the control when there is no error. */
  hint?: ReactNode;
  /** Validation message; replaces the hint and tints it as an error. */
  error?: ReactNode;
  required?: boolean;
  className?: string;
  /** The form control (input, select, textarea, …). */
  children: ReactNode;
};

/**
 * Presentational form field: label + control + hint/error. Deliberately free
 * of react-hook-form so existing `useState`-driven dialogs can adopt it without
 * changing their state management. For RHF-backed forms, compose the `ui/form`
 * primitives instead.
 */
export function Field({
  label,
  htmlFor,
  hint,
  error,
  required = false,
  className,
  children,
}: FieldProps) {
  return (
    <div data-slot="field" className={cn("flex flex-col gap-2", className)}>
      {label ? (
        <Label variant="field" htmlFor={htmlFor}>
          {label}
          {required ? (
            <span aria-hidden className="text-danger">
              {" *"}
            </span>
          ) : null}
        </Label>
      ) : null}
      {children}
      {error ? (
        <p data-slot="field-error" className="text-sm text-danger">
          {error}
        </p>
      ) : hint ? (
        <p data-slot="field-hint" className="text-sm text-ink-500">
          {hint}
        </p>
      ) : null}
    </div>
  );
}