import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export const inputClass =
  "w-full rounded-md border border-border bg-card px-3 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 aria-[invalid=true]:border-danger";

/** Label + control + help/error text, wired for assistive tech via the supplied id. */
export function Field({ id, label, help, error, children, className }: { id: string; label: string; help?: string; error?: string; children: ReactNode; className?: string }) {
  return (
    <div className={cn("space-y-1", className)}>
      <label htmlFor={id} className="block text-xs font-medium">{label}</label>
      {children}
      {help && !error ? <p id={`${id}-help`} className="text-xs text-muted-foreground">{help}</p> : null}
      {error ? <p id={`${id}-error`} role="alert" className="text-xs text-danger">{error}</p> : null}
    </div>
  );
}