"use client";

import { useEffect } from "react";
import { initAssetCache, type AssetCacheConfig } from "@shopkit/asset-cache";

/**
 * Asset Cache Initializer Component Props
 */
export interface AssetCacheInitializerProps {
  config?: AssetCacheConfig;
  /** Callback when initialization succeeds */
  onInitialized?: () => void;
  /** Callback when initialization fails */
  onError?: (error: Error) => void;
}

export function AssetCacheInitializer({
  config = {},
  onInitialized,
  onError,
}: AssetCacheInitializerProps) {
  useEffect(() => {
    // Initialize asset cache on client side
    const initCache = async () => {
      try {
        await initAssetCache(config);

        if (config.debug) {
          console.log(
            "Asset cache initialized successfully with config:",
            config
          );
        }

        onInitialized?.();
      } catch (error) {
        const errorObj =
          error instanceof Error ? error : new Error(String(error));
        console.error("Failed to initialize asset cache:", errorObj);
        onError?.(errorObj);
      }
    };

    // Only initialize in browser environment
    if (typeof window !== "undefined") {
      initCache();
    }
  }, [config, onInitialized, onError]);

  // This component doesn't render anything
  return null;
}

export default AssetCacheInitializer;