/**
 * Empty State Component (Glide-style)
 * Provides consistent empty state UI across the app
 */

(function() {
  'use strict';

  function EmptyState({ icon, title, message, actionLabel, onAction, showRefresh = false, onRefresh }) {
    return (
      <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
        {icon && (
          <div className="text-5xl mb-4">{icon}</div>
        )}
        {title && (
          <h2 className="text-lg sm:text-xl font-semibold text-slate-800 mb-2">
            {title}
          </h2>
        )}
        {message && (
          <p className="text-sm sm:text-base text-slate-600 mb-6 max-w-md">
            {message}
          </p>
        )}
        {actionLabel && onAction && (
          <button
            onClick={onAction}
            className="px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 min-h-[44px] text-base font-medium transition-colors"
          >
            {actionLabel}
          </button>
        )}
        {showRefresh && onRefresh && (
          <button
            onClick={onRefresh}
            className="mt-3 px-4 py-2 text-sm text-teal-600 hover:text-teal-700 font-medium"
          >
            Refresh
          </button>
        )}
      </div>
    );
  }

  // Export
  if (typeof window !== 'undefined') {
    window.EmptyState = EmptyState;
  }
})();