'use client';

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

import { createLazyComponent, LoadingFallback } from '../../../common';
import type { ImageViewerProps } from './types';

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

export type { ImageViewerProps };

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

/**
 * LazyImageViewer - Lazy-loaded image viewer with zoom/pan/rotate
 *
 * Automatically shows loading state while ImageViewer loads (~50KB)
 */
export const LazyImageViewer = createLazyComponent<ImageViewerProps>(
  () => import('./components').then((mod) => ({ default: mod.ImageViewer })),
  {
    displayName: 'LazyImageViewer',
    fallback: <LoadingFallback minHeight={200} text="Loading image viewer..." />,
  }
);