import { Search, Loader2, X } from 'lucide-react';

const SearchBar = ({ 
  placeholder, 
  value, 
  onChange, 
  loading = false,
  resultCount,
  onClear,
  className = ''
}) => {
  return (
    <div className={`relative ${className}`}>
      <div className="absolute left-6 top-1/2 transform -translate-y-1/2 text-gray-400">
        {loading ? (
          <Loader2 className="w-6 h-6 animate-spin text-teal-600" />
        ) : (
          <Search className="w-6 h-6" />
        )}
      </div>
      <input
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        className="w-full pl-16 pr-32 py-5 bg-white border-2 border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent text-lg shadow-lg hover:shadow-xl transition-shadow duration-300"
      />
      <div className="absolute right-4 top-1/2 transform -translate-y-1/2 flex items-center gap-3">
        <span className="px-4 py-2 bg-linear-to-r from-teal-50 to-blue-50 rounded-full text-teal-700 text-sm font-medium">
          {resultCount} results
        </span>
        <button
          onClick={onClear}
          className="p-2 hover:bg-gray-100 rounded-full transition-colors"
        >
          <X className="w-5 h-5 text-gray-400" />
        </button>
      </div>
    </div>
  );
};

export default SearchBar;