/**
 * LottiePlayer - Dynamic Import Wrapper
 *
 * Lazy loads the LottiePlayer component for optimal bundle size
 */

'use client';

import React, { lazy, Suspense } from 'react';
import { LottiePlayerProps } from './types';

// Lazy load the client component
const LottiePlayerClient = lazy(() =>
  import('./LottiePlayer.client').then((mod) => ({ default: mod.LottiePlayer }))
);

// Loading fallback component
const LoadingFallback = () => (
  <div className="flex items-center justify-center p-8">
    <div className="flex flex-col items-center gap-2">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" />
      <span className="text-sm text-gray-500">Loading player...</span>
    </div>
  </div>
);

/**
 * LottiePlayer component wrapper with dynamic import
 *
 * This component automatically handles code splitting and lazy loading
 * of the Lottie player to optimize bundle size.
 *
 * Usage:
 * ```tsx
 * import { LottiePlayer } from '@djangocfg/ui-core/tools';
 *
 * <LottiePlayer
 *   src="https://example.com/animation.json"
 *   size="md"
 *   autoplay
 *   loop
 * />
 * ```
 */
export function LottiePlayer(props: LottiePlayerProps) {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <LottiePlayerClient {...props} />
    </Suspense>
  );
}

// Re-export types for convenience
export type { LottiePlayerProps, LottieSize, LottieSpeed, LottieDirection } from './types';
export { useLottie } from './useLottie';
export type { UseLottieOptions, UseLottieReturn } from './useLottie';
