---
import { Code } from "astro:components";

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

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

<div class="not-prose code-block relative">
  <Code 
    code={code} 
    lang={lang} 
    themes={{
      light: "github-light",
      dark: "vesper"
    }}
    defaultColor={false}
  />
  <button
    type="button"
    class="code-block-copy-btn"
    aria-label="Copy code to clipboard"
  >
    <span class="code-block-copy-btn__icons">
      <span class="code-block-copy-btn__icon code-block-copy-btn__icon--check" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
          <path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path>
        </svg>
      </span>
      <span class="code-block-copy-btn__icon code-block-copy-btn__icon--copy" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
          <path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path>
        </svg>
      </span>
    </span>
  </button>
</div>
