import React from 'react';
import FrostedGlass from './FrostedGlass';

/**
 * SearchBar component with frosted glass effect
 * 
 * @param {Object} props - Component props
 * @param {string} props.placeholder - Placeholder text
 * @param {Function} props.onSearch - Search callback function
 * @returns {JSX.Element} SearchBar component
 */
const SearchBar = ({ placeholder = '搜索', onSearch }) => {
  return (
    <FrostedGlass className="px-4 py-2 mx-4 my-3 flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
      <input
        type="text"
        placeholder={placeholder}
        className="bg-transparent outline-none flex-1 text-gray-700 placeholder-gray-400"
        onChange={(e) => onSearch && onSearch(e.target.value)}
      />
    </FrostedGlass>
  );
};

export default SearchBar;