import { JSX, Node, Builder } from "canvacord";

// JSX refers to JSX factory
// Builder refers to template builder
// Node refers to component base

class TextNode extends Node<{
  data: string;
  color: string;
}> {
  /*
   * Visual representation of this node
   */
  public toElement() {
    return (
      <h1
        style={{
          color: this.getProperty("color"),
        }}
      >
        {this.getProperty("data")}
      </h1>
    );
  }
}

class ProfileCard extends Builder {
  public setUsername(name: string, color: string) {
    const node = new TextNode({
      data: name,
      color,
    });

    super.addComponent(node);
  }

  public render() {
    // return root layout along with components
    return (
      <div
        style={{
          width: `${this.width}px`,
          height: `${this.height}px`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#1A1A23",
        }}
      >
        {/* Render all of the components in the canvas */}
        {this.components.map((component) => {
          return component.toElement();
        })}
      </div>
    );
  }
}