'use client';

/**
 * Lazy-loaded VideoPlayer Component
 *
 * Heavy Vidstack (~150KB) is loaded only when component is rendered.
 * Use this for automatic code-splitting with Suspense fallback.
 *
 * For direct imports without lazy loading, use:
 * import { VideoPlayer } from '@djangocfg/ui-tools/video'
 */

import { createLazyComponent, LoadingFallback } from '../../components';
import type { VideoPlayerProps } from './types';

// ============================================================================
// Re-export types
// ============================================================================

export type { VideoPlayerProps };

// ============================================================================
// Video Loading Fallback
// ============================================================================

function VideoLoadingFallback() {
  return (
    <div className="flex items-center justify-center bg-black/90 rounded-lg aspect-video">
      <div className="flex flex-col items-center gap-2">
        <div className="relative">
          <div className="h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-white" />
          <div className="absolute inset-0 flex items-center justify-center">
            <svg
              className="h-5 w-5 text-white/60"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>
        </div>
        <span className="text-sm text-white/60">Loading video player...</span>
      </div>
    </div>
  );
}

// ============================================================================
// Lazy Component
// ============================================================================

/**
 * LazyVideoPlayer - Lazy-loaded professional video player
 *
 * Automatically shows loading state while Vidstack loads (~150KB)
 */
export const LazyVideoPlayer = createLazyComponent<VideoPlayerProps>(
  () => import('./components').then((mod) => ({ default: mod.VideoPlayer })),
  {
    displayName: 'LazyVideoPlayer',
    fallback: <VideoLoadingFallback />,
  }
);
