import React, { useEffect, useState } from 'react';
import { soundAssets } from '../../../public/sounds/manifest';
//import { cacheAssets } from '../lib/asset-loader';

export function SoundInitializer({ children }: { children: React.ReactNode }) {
  const [isReady, setIsReady] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const initializeSounds = async () => {
      try {
  //      await cacheAssets(Object.values(soundAssets));
        setIsReady(true);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to initialize sounds');
      }
    };

    initializeSounds();
  }, []);

  if (error) {
    return (
      <div className="error-container">
        <p className="error-text">Error: {error}</p>
      </div>
    );
  }

  if (!isReady) {
    return (
      <div className="loading-container">
        <p>Loading sounds...</p>
      </div>
    );
  }

  return <>{children}</>;
}