import {
  fromStringsToScene,
  toAnimationHTML,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";

const language = json();

let keyframes = [
  { code: `[]` },
  { code: `["World"]` },
  { code: `["Hello", "World"]` },
  { code: `[\n  "Hello",\n  "World"\n]` },
 ];

let sceneData = fromStringsToScene(keyframes, {
  tabSize: 2,
  language,
});

let html = toAnimationHTML(sceneData);

// Load the custom element
import "https://cdn.jsdelivr.net/npm/@codemovie/code-movie-runtime";

// Wrap the generated HTML and use it in the page!
document.body.innerHTML = `<code-movie-runtime controls keyframes="0 1 2 3">
  ${html}
</code-movie-runtime>`;