'use client';

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

import { createLazyComponent, CardLoadingFallback } from '../../../common';
import type { MermaidProps } from './index';

// ============================================================================
// Types
// ============================================================================

export type { MermaidProps };

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

/**
 * LazyMermaid - Lazy-loaded Mermaid diagram renderer
 *
 * Automatically shows loading state while Mermaid loads (~800KB)
 */
export const LazyMermaid = createLazyComponent<MermaidProps>(
  () => import('./Mermaid.client'),
  {
    displayName: 'LazyMermaid',
    fallback: (
      <CardLoadingFallback
        title="Diagram"
        description="Loading..."
        minHeight={200}
      />
    ),
  }
);