import type { InputHTMLAttributes, ReactNode } from 'react';

interface FieldProps {
  label: string;
  htmlFor?: string;
  children: ReactNode;
}

/** Labeled form control wrapper for filter bars and forms. */
export function Field({ label, htmlFor, children }: FieldProps) {
  return (
    <div>
      <label htmlFor={htmlFor} className="mb-1 block text-xs text-gray-400">
        {label}
      </label>
      {children}
    </div>
  );
}

export function Input({ className = '', ...rest }: InputHTMLAttributes<HTMLInputElement>) {
  return <input className={`input-glass px-3 py-1.5 text-sm ${className}`} {...rest} />;
}
