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

interface Props {
  code: string;
  lang?: "tsx" | "ts" | "jsx" | "js" | "bash" | "css";
}

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

<div class="overflow-hidden rounded-lg">
  <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>
