---
import ComponentPreview from "./ComponentPreview.astro";
import CodeBlock from "./CodeBlock.astro";

interface Props {
  code: string;
  lang?: "tsx" | "ts" | "jsx" | "js" | "bash" | "css";
  /**
   * Visual regression section identifier.
   * When provided, the screenshot worker can target this specific demo
   * for stable, per-component screenshots instead of full-page captures.
   */
  vrSection?: string;
  /**
   * Human-readable title for visual regression reports.
   * Defaults to vrSection with formatting applied.
   */
  vrTitle?: string;
}

const { code, lang = "tsx", vrSection, vrTitle } = Astro.props;

// Build data attributes for visual regression targeting
const vrAttrs = vrSection
  ? {
      "data-vr-demo": "",
      "data-vr-section": vrSection,
      "data-vr-title": vrTitle || vrSection.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
    }
  : {};
---

<div class="not-prose overflow-hidden rounded-lg" {...vrAttrs}>
  <ComponentPreview>
    <slot />
  </ComponentPreview>
  <div class="[&>.code-block]:rounded-none [&>.code-block]:rounded-b-lg [&>.code-block]:border-t-0">
    <CodeBlock code={code} lang={lang} />
  </div>
</div>
