"use client";

// R15 C.3: client-side dynamic imports with ssr:false for heavy below-fold
// components on the profile page. Server components can't use ssr:false
// directly, so this thin client wrapper file owns the lazy boundary.
// Trims ~40-80 KB from the initial JS bundle on mobile — these only ship
// when (and if) the user scrolls into them.

import dynamic from "next/dynamic";

const skeletonClass = "block w-full h-32 bg-surface-light animate-pulse rounded";

export const StoryViewerLazy = dynamic(
  () => import("@/components/shared/story-viewer"),
  { ssr: false, loading: () => <div className={skeletonClass} /> },
);

export const ReviewAiSummaryLazy = dynamic(
  () => import("@/components/shared/review-ai-summary"),
  { ssr: false, loading: () => <div className="h-16 bg-surface-light animate-pulse rounded" /> },
);

export const QRCodeShareLazy = dynamic(
  () => import("@/components/shared/qr-code-share"),
  { ssr: false, loading: () => null },
);

export const ShareDropdownLazy = dynamic(
  () => import("@/components/shared/share-dropdown"),
  { ssr: false, loading: () => null },
);