import { html, type TemplateResult } from '@design.estate/dees-element';
import { injectCssVariables } from './00variables.js';

/**
 * Wraps a demo template with CSS variable injection
 * Ensures design system variables are available for component styling
 */
export function wrapDemo(templateFn: () => TemplateResult): () => TemplateResult {
  return () => {
    // Inject CSS variables into the document
    injectCssVariables();
    return templateFn();
  };
}

/**
 * Helper to create demo with automatic CSS injection
 */
export function createDemo(template: TemplateResult): () => TemplateResult {
  return () => {
    injectCssVariables();
    return template;
  };
}