'use client'

import dynamic from 'next/dynamic'

// Lazy load heavy components
export const ComplianceMapView = dynamic(
  () => import('./ComplianceMapView').then((mod) => ({ default: mod.ComplianceMapView })),
  {
    loading: () => <div className="h-96 flex items-center justify-center">Loading map...</div>,
    ssr: false, // Mapbox requires client-side only
  }
)

export const ReactFlowTopology = dynamic(
  () => import('./topology/ReactFlowTopology').then((mod) => ({ default: mod.ReactFlowTopology })),
  {
    loading: () => <div className="h-[600px] flex items-center justify-center">Loading topology...</div>,
    ssr: false,
  }
)

export const CostForecast = dynamic(
  () => import('./CostForecast').then((mod) => ({ default: mod.CostForecast })),
  {
    loading: () => <div className="h-96 flex items-center justify-center">Loading forecast...</div>,
  }
)

export const ComplianceGapAnalysis = dynamic(
  () => import('./ComplianceGapAnalysis').then((mod) => ({ default: mod.ComplianceGapAnalysis })),
  {
    loading: () => <div className="h-96 flex items-center justify-center">Loading analysis...</div>,
  }
)

export const AuditLogViewer = dynamic(
  () => import('./AuditLogViewer').then((mod) => ({ default: mod.AuditLogViewer })),
  {
    loading: () => <div className="h-96 flex items-center justify-center">Loading audit log...</div>,
  }
)

export const VersionHistory = dynamic(
  () => import('./VersionHistory').then((mod) => ({ default: mod.VersionHistory })),
  {
    loading: () => <div className="h-96 flex items-center justify-center">Loading versions...</div>,
  }
)

