import type { JSX } from "solid-js";

interface ComponentDemoProps {
  name: string;
  description: string;
  children: JSX.Element;
}

/** Renders a titled component demo block with description and bordered demo area. */
export function ComponentDemo(props: ComponentDemoProps) {
  const wrapper = (
    <div class="mb-12">
      <h3 class="text-xl font-semibold text-gray-900 mb-1">{props.name}</h3>
      <p class="text-sm text-gray-500 mb-4">{props.description}</p>
      <div class="border border-gray-200 rounded-lg p-6 bg-white">
        {props.children}
      </div>
    </div>
  );
  return wrapper;
}
