---
/**
 * TypstBlock 组件
 * 
 * 用于在 MDX 文章中渲染 Typst 数学公式和复杂排版。
 * 
 * 使用方式：
 * <TypstBlock>
 * $ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $
 * </TypstBlock>
 * 
 * 注意：此组件需要在构建时安装 Typst 编译器。
 * 如果 Typst 未安装，会显示原始代码块作为降级方案。
 */

interface Props {
  class?: string;
}

const { class: className = '' } = Astro.props;

// 获取子内容（Typst 代码）
const content = await Astro.slots.render('default');
const typstCode = content?.trim() || '';
---

<div class:list={['typst-block', 'my-6', className]}>
  {/* 
    Typst 渲染区域
    在实际实现中，这里会调用 Typst 编译器将代码渲染为 SVG
    目前作为占位符显示
  */}
  <div class="p-4 bg-muted rounded-lg border border-border overflow-x-auto">
    {typstCode ? (
      <div class="flex flex-col items-center">
        {/* SVG 输出区域 (构建时会被替换为实际的 Typst 渲染结果) */}
        <div class="typst-output text-lg" data-typst-code={typstCode}>
          <code class="font-mono text-primary-600 dark:text-primary-400">
            {typstCode}
          </code>
        </div>
        <span class="text-xs text-foreground/40 mt-2">Typst 公式</span>
      </div>
    ) : (
      <p class="text-foreground/40 text-center">请提供 Typst 代码</p>
    )}
  </div>
</div>

<style>
  .typst-block {
    /* 确保 Typst 内容居中显示 */
    text-align: center;
  }

  .typst-output {
    /* 为数学公式提供合适的样式 */
    font-family: 'Latin Modern Math', 'STIX Two Math', 'Noto Serif SC', serif;
    line-height: 1.8;
  }

  .typst-output svg {
    /* SVG 输出样式 */
    max-width: 100%;
    height: auto;
  }
</style>