// Exercise 1: JSX compiles to plain objects — prove it to yourself
//
// `describeElement(el)` takes a React element (the object JSX produces, NOT
// a rendered DOM node) and returns a short string describing its shape.
// This exercise never touches the DOM — it's about understanding that a
// React element is just { type, props } before React ever "does" anything.
//
// Implement describeElement so that for an element created with
// <tag propA="x">child</tag>, it returns "<tag propA=x>child</tag>".
// Assume props always contains at most one extra attribute besides
// "children", to keep this simple. children is always a string.

import { createElement, type ReactElement } from "react";

function describeElement(el: ReactElement): string {
  // TODO: read el.type and el.props to build the description string.
  // el.type is the tag name (e.g. "tag") for host elements.
  // el.props is an object like { propA: "x", children: "child" }.
  return "";
}

// --- self-check: do not modify below this line ---
const a = createElement("p", { className: "note" }, "hello");
const b = createElement("button", { disabled: true }, "click me");
const c = createElement("span", {}, "plain");

console.log(describeElement(a)); // expect: <p className=note>hello</p>
console.log(describeElement(b)); // expect: <button disabled=true>click me</button>
console.log(describeElement(c)); // expect: <span>plain</span>

const ok =
  describeElement(a) === "<p className=note>hello</p>" &&
  describeElement(b) === "<button disabled=true>click me</button>" &&
  describeElement(c) === "<span>plain</span>";
console.log(ok ? "PASS" : "FAIL");