'use client';

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

import { createLazyComponent } from '../../../../common';
import type { Language } from 'prism-react-renderer';

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

export interface PrettyCodeProps {
  data: string | object;
  language: Language;
  className?: string;
  mode?: 'dark' | 'light';
  inline?: boolean;
  customBg?: string;
  isCompact?: boolean;
  scrollIsolation?: boolean;
  maxLines?: number;
  /** Header expand (⤢) callback, shown while the code is height-capped. */
  onExpand?: () => void;
  /** ``'card'`` (default) ships the full chrome. ``'plain'`` is
   *  chrome-less — for embedding inside another scroll container. */
  variant?: 'card' | 'plain';
}

export type { Language };

// ============================================================================
// Code Loading Fallback
// ============================================================================

function CodeLoadingFallback() {
  return (
    <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-code">
      <div className="p-4">
        <div className="flex items-center gap-2">
          <div className="animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20" />
          <span className="text-xs text-muted-foreground">Loading code...</span>
        </div>
      </div>
    </div>
  );
}

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

/**
 * LazyPrettyCode - Lazy-loaded code syntax highlighter
 *
 * Automatically shows loading state while Prism loads (~500KB)
 */
export const LazyPrettyCode = createLazyComponent<PrettyCodeProps>(
  () => import('./PrettyCode.client'),
  {
    displayName: 'LazyPrettyCode',
    fallback: <CodeLoadingFallback />,
  }
);

// `PrettyCode` is the historical named export — same component as
// `LazyPrettyCode`, kept for backwards compatibility with callers that
// imported it from the old root barrel.
export { LazyPrettyCode as PrettyCode };
export { default } from './index';