Stirling-PDF/frontend/src/components/shared/TextInput.tsx

import React, { forwardRef } from 'react';
import { useMantineColorScheme } from '@mantine/core';
import LocalIcon from './LocalIcon';
import styles from './textInput/TextInput.module.css';

/**
 * Props for the TextInput component
 */
export interface TextInputProps {
  /** The input value (required) */
  value: string;
  /** Callback when input value changes (required) */
  onChange: (value: string) => void;
  /** Placeholder text */
  placeholder?: string;
  /** Optional left icon */
  icon?: React.ReactNode;
  /** Whether to show the clear button (default: true) */
  showClearButton?: boolean;
  /** Custom clear handler (defaults to setting value to empty string) */
  onClear?: () => void;
  /** Additional CSS classes */
  className?: string;
  /** Additional inline styles */
  style?: React.CSSProperties;
  /** HTML autocomplete attribute (default: 'off') */
  autoComplete?: string;
  /** Whether the input is disabled (default: false) */
  disabled?: boolean;
  /** Whether the input is read-only (default: false) */
  readOnly?: boolean;
  /** Accessibility label */
  'aria-label'?: string;
}

export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
  value,
  onChange,
  placeholder,
  icon,
  showClearButton = true,
  onClear,
  className = '',
  style,
  autoComplete = 'off',
  disabled = false,
  readOnly = false,
  'aria-label': ariaLabel,
  ...props
}, ref) => {
  const { colorScheme } = useMantineColorScheme();

  const handleClear = () => {
    if (onClear) {
      onClear();
    } else {
      onChange('');
    }
  };

  const shouldShowClearButton = showClearButton && value.trim().length > 0 && !disabled && !readOnly;

  return (
    <div className={`${styles.container} ${className}`} style={style}>
      {icon && (
        <span 
          className={styles.icon}
          style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
        >
          {icon}
        </span>
      )}
      <input
        ref={ref}
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.currentTarget.value)}
        autoComplete={autoComplete}
        className={styles.input}
        disabled={disabled}
        readOnly={readOnly}
        aria-label={ariaLabel}
        style={{
          backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF',
          color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382',
          paddingRight: shouldShowClearButton ? '40px' : '12px',
          paddingLeft: icon ? '40px' : '12px',
        }}
        {...props}
      />
      {shouldShowClearButton && (
        <button
          type="button"
          className={styles.clearButton}
          onClick={handleClear}
          style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
          aria-label="Clear input"
        >
          <LocalIcon icon="close-rounded" width="20" height="20" />
        </button>
      )}
    </div>
  );
});