<script lang="ts">
  import { onMount } from 'svelte';
  import { codeToHtml } from 'shiki';

  interface Props {
    code: string;
    lang?: string;
  }

  let { code, lang = 'text' }: Props = $props();

  let html = $state('');

  onMount(async () => {
    const result = await codeToHtml(code, {
      lang,
      theme: 'github-dark'
    });
    // Extract just the inner code content from Shiki's output
    // Shiki wraps in <pre><code>...</code></pre>, we only want the inner spans
    const match = result.match(/<code[^>]*>([\s\S]*?)<\/code>/);
    html = match ? match[1] : code;
  });
</script>

{#if html}
  <code class="inline-shiki">{@html html}</code>
{:else}
  <code>{code}</code>
{/if}

<style>
  .inline-shiki {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
  }

  .inline-shiki :global(span) {
    font-size: inherit;
    line-height: inherit;
  }
</style>
