import React from 'react';

interface SearchBoxProps {
  placeholder?: string;
  defaultValue?: string;
  onSearch: (value: string) => void;
  buttonText?: string;
  className?: string;
  name?: string;
}

export function SearchBox({
  placeholder = '请输入搜索内容',
  defaultValue = '',
  onSearch,
  buttonText = '搜索',
  className = '',
  name = 'keyword'
}: SearchBoxProps) {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const value = formData.get(name) as string;
    onSearch(value);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 对于没有按钮的输入框，我们希望在输入时就触发搜索
    if (className.includes('form-input-only')) {
      onSearch(e.target.value);
    }
  };

  const isIconOnly = buttonText === '';
  const isFilterControl = className.includes('filter-control');
  const searchBoxClass = `search-box ${className} ${isFilterControl ? 'search-box-row' : ''}`;

  return (
    <form onSubmit={handleSubmit} className={searchBoxClass}>
      <input
        type="text" 
        id={name}
        name={name}
        className={`form-input ${isFilterControl ? 'flex-1' : ''}`}
        placeholder={placeholder}
        defaultValue={defaultValue}
        onChange={handleChange}
      />
      {!className.includes('form-input-only') && (
        <button
          type="submit" 
          className={`search-button ${isIconOnly ? "icon-only-btn" : ""}`}
        >
          <i className="ri-search-line"></i>
          {buttonText && <span>{buttonText}</span>}
        </button>
      )}
    </form>
  );
}