import { createBlueprint, BlueprintComponent } from "nitropage";
import { textData } from "nitropage/data/text";

// How the blueprint should be rendered, literally a Solid Component
const MyComponent: BlueprintComponent<typeof blueprint> = function (props) {
  return (
    <div {...props.elementProps}>
      {/* Used to show selection borders in the Page Editor */}
      {props.handles}

      {/* Accessing the "title" / "text" setting value, props.data is properly typed */}
      <h2>{props.data.title}</h2>
      <p>{props.data.text}</p>
    </div>
  );
};

// How the blueprint should behave in the Page Editor
export const blueprint = createBlueprint(
  () => ({
    // Schema for the available Settings
    data: {
      // textData can be used for "string" values
      // it will render a simple input field in the Element Editor
      title: textData(),
      // Another "string" value, with a wider input field
      text: textData({
        wide: true,
      }),
    },
  }),
  import.meta.hot
);

export default MyComponent;
// Every blueprint must have an unique identifier
// The blueprint file can be freely renamed or moved, Elements on the page will work regardless
export const id = "lxu9qu296xliwwqoyurgkrv3";