// A worked example: the code on one side, that same code RUNNING on the other.
//
// The code string is written by hand rather than extracted from the source, and that
// is a known compromise — a hand-copied snippet can drift from the component beside
// it. The alternative (a build step that slices the real source) buys accuracy at the
// cost of a second thing to maintain, and the snippets here are short enough to read
// against the live demo in one glance. If they start getting long, that trade flips.

import { JSXElement } from "solid-js";
import { CodeBox } from "@ui/General";

export function Demo(props: { title: string; code: string; children?: JSXElement }) {
    return (
        <section class="mt-10">
            <h2 class="text-lg font-semibold text-ink">{props.title}</h2>

            <div class="mt-3 overflow-hidden rounded-default border border-line">
                {/* The live half. It sits on the plain surface, not in a tinted "preview"
                    box, because a component that only looks right against a special
                    background is a component that will look wrong in the app. */}
                <div class="border-b border-line px-4 py-2">
                    <span class="font-mono text-[11px] uppercase tracking-widest text-ink-faint">running</span>
                </div>
                <div class="px-4 py-6">{props.children}</div>

                <div class="border-t border-line bg-surface-muted px-4 py-2">
                    <span class="font-mono text-[11px] uppercase tracking-widest text-ink-faint">source</span>
                </div>
                <CodeBox code={props.code} class="rounded-none border-0" />
            </div>
        </section>
    );
}
