import React from 'react';
import { Button } from './Button';

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);
    }
  };

  return (
    <form onSubmit={handleSubmit} className={`search-box ${className}`}>
      <input 
        type="text" 
        id={name}
        name={name}
        className={className.includes('form-input-only') ? "form-input" : "form-input rounded-r-none"}
        placeholder={placeholder}
        defaultValue={defaultValue}
        onChange={handleChange}
      />
      {buttonText && !className.includes('form-input-only') && (
        <Button type="primary" icon="ri-search-line" className="rounded-l-none">
          {buttonText}
        </Button>
      )}
    </form>
  );
}