import { useId } from 'react'

// Shared field plumbing for the labelled form controls (TextField, TextArea,
// Select) so their id-fallback and base styling stay in one place.

/** The field id: an explicit id, else the name, else a generated stable id, so
 *  the label's htmlFor always binds to something. */
export function useFieldId(id?: string, name?: string): string {
  const generated = useId()
  return id ?? name ?? generated
}

/** Base classes shared by the text/select/textarea controls. text-base (16px)
 *  keeps iOS Safari from zooming on focus. */
export const fieldControlClass =
  'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg ' +
  'outline-none transition-colors placeholder:text-muted/70 ' +
  'focus:border-accent focus:ring-2 focus:ring-accent/30 disabled:opacity-60'