/// <cts-enable />
import { Cell, Default, NAME, recipe, UI } from "commontools";

interface Item {
  title: string;
}

interface ListInput {
  title: Cell<Default<string, "My List">>;
  items: Cell<Default<Item[], []>>;
}

interface ListOutput extends ListInput {}

export default recipe<ListInput, ListOutput>(
  "ct-list demo",
  ({ title, items }) => {
    return {
      [NAME]: title,
      [UI]: (
        <ct-vstack gap="2" style="padding: 1rem; max-width: 600px;">
          <ct-input
            $value={title}
            placeholder="List title"
            customStyle="font-size: 24px; font-weight: bold;"
          />

          <ct-card>
            <ct-list
              // $ prefix implied passing a Cell<Item[]> rather than just the Item[] itself
              // this allows components like ct-list to manage the cell internally.
              $value={items}
              editable
              title="Items"
            />
          </ct-card>
        </ct-vstack>
      ),
      title,
      items,
    };
  },
);