/**
 * PrettyCode Component - Dynamic Import Wrapper
 *
 * Lazy loads the heavy Prism library (~500KB) only when needed.
 * This significantly reduces the initial bundle size.
 */

'use client';

import React, { lazy, Suspense } from 'react';
import type { Language } from 'prism-react-renderer';

// Lazy load the client component
const PrettyCodeClient = lazy(() => import('./PrettyCode.client'));

// Loading fallback component
const LoadingFallback = () => (
  <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"></div>
        <span className="text-xs text-muted-foreground">Loading code...</span>
      </div>
    </div>
  </div>
);

export interface PrettyCodeProps {
  data: string | object;
  language: Language;
  className?: string;
  mode?: 'dark' | 'light';
  inline?: boolean;
  customBg?: string;
  isCompact?: boolean;
  /** Block scroll capture until user clicks (default: true) */
  scrollIsolation?: boolean;
  /**
   * Line count above which the block starts scrolling instead of growing.
   * ``undefined`` (default) = no cap, block grows to fit. Set e.g. ``50``
   * to inline short snippets and cap long ones.
   */
  maxLines?: number;
  /** When set, a header expand (⤢) button appears while the code is
   *  height-capped (exceeds `maxLines`). Lets a host open it full-screen. */
  onExpand?: () => void;
  /**
   * Visual variant:
   *   - ``"card"`` (default) — full chrome: border, background, hover
   *     toolbar (Copy + language tag), optional internal scroll. Suits
   *     a standalone code block in documentation prose where the block
   *     is its own surface.
   *   - ``"plain"`` — chrome-less: no border, no background, no toolbar,
   *     no internal scroll. Grows to fit its content. Use when
   *     embedding inside another scroll container (e.g. the Response
   *     panel) — avoids double-scroll surfaces and lets the parent
   *     manage copy/language affordances.
   */
  variant?: 'card' | 'plain';
}

const PrettyCode: React.FC<PrettyCodeProps> = (props) => {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <PrettyCodeClient {...props} />
    </Suspense>
  );
};

export default PrettyCode;
export type { Language };