import { Field } from '@base-ui/react/field';
import { cn } from '#/lib/utils.js';

/**
 * One labelled text control. Field.Root binds label, control and validity
 * together and names the submitted value; validation is the constraint
 * attributes on the control itself.
 */
export function TextField({
  className,
  name,
  label,
  hint,
  type = 'text',
  ...props
}) {
  return (
    <Field.Root name={name} className={cn('flex flex-col gap-1.5', className)}>
      <Field.Label className="text-[13px] text-muted-foreground">
        {label}
      </Field.Label>
      <Field.Control
        type={type}
        className={cn(
          'h-11 w-full rounded-xl border border-input bg-transparent px-3.5 text-base text-foreground shadow-xs outline-none transition-colors md:text-sm',
          'placeholder:text-faint focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
          'data-invalid:border-destructive data-invalid:ring-destructive/20',
        )}
        {...props}
      />
      {hint && <div className="text-faint text-xs">{hint}</div>}
      <Field.Error className="text-destructive text-xs" />
    </Field.Root>
  );
}