'use client';

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

import { createLazyComponent, LoadingFallback } from '../../components';
import type { JsonTreeConfig, JsonTreeMode } from './index';
import type { CommonExternalProps } from 'react-json-tree';

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

export interface JsonTreeProps {
  title?: string;
  data: unknown;
  /**
   * Display mode:
   * - "full" (default): With toolbar and border
   * - "compact": No toolbar, subtle styling
   * - "inline": Minimal, no border
   */
  mode?: JsonTreeMode;
  config?: JsonTreeConfig;
  jsonTreeProps?: Partial<CommonExternalProps>;
}

export type { JsonTreeConfig, JsonTreeMode };

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

/**
 * LazyJsonTree - Lazy-loaded JSON visualization tree
 *
 * Automatically shows loading state while JsonTree loads (~100KB)
 *
 * @example
 * // Full mode (with toolbar)
 * <LazyJsonTree data={obj} mode="full" />
 *
 * // Compact mode (no toolbar)
 * <LazyJsonTree data={obj} mode="compact" />
 *
 * // Inline mode (minimal, for embedding)
 * <LazyJsonTree data={obj} mode="inline" />
 */
export const LazyJsonTree = createLazyComponent<JsonTreeProps>(
  () => import('./index'),
  {
    displayName: 'LazyJsonTree',
    fallback: <LoadingFallback minHeight={100} text="Loading JSON viewer..." />,
  }
);
