<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 () => {
    html = await codeToHtml(code.trim(), {
      lang,
      theme: 'github-dark'
    });
  });
</script>

{#if html}
  <div class="code-block">
    {@html html}
  </div>
{:else}
  <pre><code>{code.trim()}</code></pre>
{/if}

<style>
  .code-block :global(pre) {
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.85em;
    line-height: 1.5;
  }

  .code-block :global(code) {
    background: none;
    padding: 0;
    font-size: inherit;
  }

  pre {
    background-color: var(--color-base-300, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
  }

  pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.5;
    white-space: pre;
  }
</style>
