component CodeBlock {
  props { 
    language = "text" 
    title = "" 
    code = "" 
    copyable = true 
    class = "" 
    }

  view {
    <section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
      <header class="flex items-center justify-between gap-4 border-b border-[var(--wire-color-code-border,#1e293b)] px-4 py-3 text-xs text-[var(--wire-color-code-muted,#94a3b8)] sm:px-5">
        <span class="inline-flex items-center gap-2 font-medium">
          <span class="icon-[lucide--terminal]" aria-hidden="true"></span>
          {#if title}{title}{:else}{language}{/if}
        </span>
        {#if copyable}
          <button type="button" data-copy-code="{code}" class="inline-flex items-center gap-2 rounded-lg border border-[var(--wire-color-code-border,#334155)] px-3 py-1.5 font-semibold text-[var(--wire-color-code-text,#e2e8f0)] transition hover:bg-[var(--wire-color-code-surface,#0f172a)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
            <span class="icon-[lucide--copy]" aria-hidden="true"></span>Copy
          </button>
        {/if}
      </header>
      <pre class="m-0 max-w-full overflow-x-auto p-5 text-sm leading-7"><code>{code}</code></pre>
    </section>
  }
}