// src/Demo.tsx

import { kosComponent, useKosModel } from "@coca-cola/kos-ui-components";
import { DemoFactory } from "./models/demo/demo-factory";
export const DemoComponent = () => {
  // create or import a new Demo model with ID demo1
  // set the model name via the options
  const { model, ready } = useKosModel<IDemoModel, IDemoModelOptions>({
    modelId: "demo1",
    factory: DemoFactory,
    options: { name: "demo-name" },
  });

  const isReady = ready && model;

  return isReady ? <div>Model Name: {model.name}</div> : <div>LOADING</div>;
};

// export wrapped component that will listent for changes in kos models
export const Demo = kosComponent(DemoComponent);