// Leonard's Farm: Input component

// Labelled text input with a friendly farm-clean style.
function Input({ label, id, type = 'text', placeholder, value, onChange, required = false, hint, ...rest }) {
  const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined);
  return (
    <label htmlFor={inputId} style={{ display: 'block', fontFamily: 'var(--font-body)' }}>
      {label && (
        <span style={{
          display: 'block', marginBottom: 'var(--space-2)',
          fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-semibold)',
          color: 'var(--text-strong)',
        }}>
          {label}{required && <span style={{ color: 'var(--brand-primary)' }}> *</span>}
        </span>
      )}
      <input
        id={inputId}
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        required={required}
        style={{
          width: '100%',
          padding: '13px 16px',
          fontFamily: 'var(--font-body)',
          fontSize: 'var(--fs-body)',
          color: 'var(--text-strong)',
          background: 'var(--surface-card)',
          border: '1px solid var(--border-strong)',
          borderRadius: 'var(--radius-md)',
          outline: 'none',
          transition: 'border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)',
        }}
        onFocus={(e) => {
          e.currentTarget.style.borderColor = 'var(--brand-primary)';
          e.currentTarget.style.boxShadow = 'var(--shadow-focus)';
        }}
        onBlur={(e) => {
          e.currentTarget.style.borderColor = 'var(--border-strong)';
          e.currentTarget.style.boxShadow = 'none';
        }}
        {...rest}
      />
      {hint && (
        <span style={{ display: 'block', marginTop: 'var(--space-2)', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>{hint}</span>
      )}
    </label>
  );
}

window.Input = Input;