// Leonard's Farm: Textarea component

// Labelled multi-line text area, matching Input styling.
function Textarea({ label, id, placeholder, value, onChange, rows = 5, required = false, ...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>
      )}
      <textarea
        id={inputId}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        rows={rows}
        required={required}
        style={{
          width: '100%',
          padding: '13px 16px',
          fontFamily: 'var(--font-body)',
          fontSize: 'var(--fs-body)',
          lineHeight: 'var(--lh-body)',
          color: 'var(--text-strong)',
          background: 'var(--surface-card)',
          border: '1px solid var(--border-strong)',
          borderRadius: 'var(--radius-md)',
          outline: 'none',
          resize: 'vertical',
          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}
      />
    </label>
  );
}

window.Textarea = Textarea;