/**
 * Skeleton Loading Components (Glide-style)
 * Provides skeleton loading states instead of spinners
 */

(function() {
  'use strict';

  // Card skeleton for destination/activity cards
  function CardSkeleton() {
    return (
      <div className="border border-slate-200 rounded-lg overflow-hidden bg-white animate-pulse">
        <div className="w-full h-48 bg-slate-200"></div>
        <div className="p-4 space-y-3">
          <div className="h-5 bg-slate-200 rounded w-3/4"></div>
          <div className="h-4 bg-slate-200 rounded w-full"></div>
          <div className="h-4 bg-slate-200 rounded w-2/3"></div>
        </div>
      </div>
    );
  }

  // List skeleton for flow plan activities
  function ActivityListSkeleton({ count = 3 }) {
    return (
      <div className="space-y-3">
        {Array.from({ length: count }).map((_, idx) => (
          <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden bg-white animate-pulse">
            <div className="flex items-start gap-3 p-3">
              <div className="flex-shrink-0 w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-slate-200"></div>
              <div className="flex-1 space-y-2">
                <div className="h-4 bg-slate-200 rounded w-1/4"></div>
                <div className="h-5 bg-slate-200 rounded w-3/4"></div>
                <div className="h-4 bg-slate-200 rounded w-full"></div>
                <div className="h-3 bg-slate-200 rounded w-1/2"></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  // Simple text skeleton
  function TextSkeleton({ lines = 1, className = "" }) {
    return (
      <div className={`space-y-2 ${className}`}>
        {Array.from({ length: lines }).map((_, idx) => (
          <div key={idx} className="h-4 bg-slate-200 rounded animate-pulse" style={{ width: idx === lines - 1 ? '60%' : '100%' }}></div>
        ))}
      </div>
    );
  }

  // Export
  if (typeof window !== 'undefined') {
    window.Skeletons = {
      CardSkeleton,
      ActivityListSkeleton,
      TextSkeleton
    };
  }
})();