// src/Demo.tsx

import { useState } from "react";

export const Demo = () => {
  const [name] = useState("My Demo Component");

  return <div>Hello: {name}</div>;
};

// src/App.tsx

import React, { Suspense } from "react";
import { Demo } from "./Demo";
import "./App.css";
import type { IKosRegistry } from "@coca-cola/kos-ui-core";
import {
  ErrorBoundaryWithFallback,
  initKosProvider,
} from "@coca-cola/kos-ui-components";

// create an empty KOS model registry.
export const Registry: IKosRegistry = {
  models: {},
  preloadModels: [],
};

const { KosCoreContextProvider } = initKosProvider(Registry);

function App() {
  return (
    <ErrorBoundaryWithFallback>
      <Suspense fallback={<div> LOADING </div>}>
        <KosCoreContextProvider>
          <Demo></Demo>
        </KosCoreContextProvider>
      </Suspense>
    </ErrorBoundaryWithFallback>
  );
}

export default App;