import { SceneViewer } from "@iot-app-kit/scene-composer";
import {
  ButtonStyle,
  useOverrideTags,
  DirectSceneLoader,
} from "@iak-extra/scene-composer-extra";

function App() {
  // TwinMakerの定義ファイルをpublicに配置する
  const sceneLoader = new DirectSceneLoader("/single-content.json");

  /** TwinMakerをカスタマイズするコントローラー */
  const controller = useOverrideTags({
    // tag-name-htmlのタグを、ボタンに置き換える
    "tag-name-html": (replaceTag) =>
      replaceTag.toHTML
        ?.create({
          // HTMLを配置する（サンプルではbootstrapのクラスを使っているため、index.htmlでbootstrapのcssを参照します）
          element: (
              <div className="card" style=>
                <div className="card-body">
                  <h5 className="card-title">Card title</h5>
                  <p className="card-text">
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  </p>
                  <a className="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            ),
        })
  });
  return (
    <div className="App">
      <SceneViewer
        sceneComposerId={controller.composerId}
        sceneLoader={sceneLoader}
        activeCamera="Camera1"
      />
    </div>
  );
}