const EmptyState = ({ 
  Icon, 
  title, 
  description, 
  searchQuery, 
  onClearSearch,
  defaultMessage = 'Try searching'
}) => {
  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:border-teal-200 p-12 text-center">
      <div className="max-w-md mx-auto">
        <div className="w-24 h-24 bg-linear-to-br from-teal-100 to-blue-100 rounded-2xl mx-auto mb-8 flex items-center justify-center">
          <Icon className="w-12 h-12 text-teal-600" />
        </div>
        <h3 className="text-2xl font-bold text-gray-900 mb-3">{title}</h3>
        <p className="text-gray-600 mb-6">{description}</p>
        {searchQuery && (
          <button
            onClick={onClearSearch}
            className="px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
          >
            Clear Search
          </button>
        )}
      </div>
    </div>
  );
};

export default EmptyState;