import { useEffect, useState } from "react";
import { continueRender, delayRender } from "remotion";

export const useTheme = (theme: string) => {
  const [isStyleLoaded, setIsStyleLoaded] = useState(theme === "__skip__");

  useEffect(() => {
    // When using inline styles (styleConfig), skip CSS theme loading entirely
    if (theme === "__skip__") {
      setIsStyleLoaded(true);
      return;
    }

    const handle = delayRender(`Loading theme: ${theme}`);

    import(`@/themes/${theme}.css`)
      .then(() => {
        setIsStyleLoaded(true);
        continueRender(handle);
      })
      .catch((err) => {
        console.error(`Failed to load theme: ${theme}`, err);
        setIsStyleLoaded(true);
        continueRender(handle);
      });
  }, [theme]);

  return isStyleLoaded;
};